Welcome to the IMTalk - Internet Marketing & SEO Forum.
+ Reply to Thread
Results 1 to 3 of 3
  1. #1
    arronmattwills is offline IM & SEO Mumbler arronmattwills is on a distinguished road
    Join Date
    Jan 2014
    Location
    India
    Posts
    350
    Thanks Given
    9
    Thanked 12 Times in 11 Posts

    How to fix Table issue in Mobile view of a web page?

    I have been facing a problem that table is over flowing in mobile devices, it looks fine in desktop view.
    There are some jQuery or java script codes available over internet but i don't want to use them. I am looking to fix it with CSS only. In CSS tricks also they mentioned some logical solutions but that is working to some extent and getting some bugs, at the end that doesn't serves our purpose.

    Found some CSS style online, it works to some extent but this code is also having style issue, content is showing in zig zag manner, if you have any solutions for this that you have already dealt with, please share:


    Keep it as a <table> for accessibility definitely. In your media query for smaller sizes, you could do something like:

    @media all and (max-width: 768px) {
    tr { display: block; border: 1px solid grey; padding: 1em; text-align: center; }
    td { display: inline; padding: 0 .5em; }
    }

    That wouldn’t force a line break though. The easiest way to get around that would be to add a <br> element to your second cell and hide it in your desktop CSS:

    td>br { display: none; }
    @media all and (max-width: 768px) {
    td>br { display: block; }
    }

  2. #2
    davidrsdw is offline IM & SEO Weak Jaw davidrsdw is on a distinguished road
    Join Date
    Oct 2014
    Location
    India
    Posts
    151
    Thanks Given
    0
    Thanked 9 Times in 7 Posts
    We can also use Zebra stripping where each table row becomes a table in itself but only as wide as the screen. For each cell we have write our own css so that we can solve this issue.

  3. #3
    saiwebtech is offline IM & SEO Whisperer saiwebtech is on a distinguished road
    Join Date
    Mar 2018
    Location
    Hyderabad
    Posts
    27
    Thanks Given
    1
    Thanked 2 Times in 1 Post
    I found and easy solutions in w3schools and i tried it works excellent. As per their guidelines please read the instructions:
    To create a responsive table, add a container element with overflow-x:auto around the <table>:
    <div style="overflow-x:auto;">
    <table>
    ...
    </table>
    </div>

    This works fine in order to overcome tables issue in responsive web design or mobile view.

  4. The Following 2 Users Say Thank You to saiwebtech For This Useful Post:



 

Similar Threads

  1. Table CSS issue
    By dtommy79 in forum Programming, Scripting, Database, Testing, Debugging...
    Replies: 1
    Last Post: 05-20-2015, 04:27 PM
  2. Issue with page loading too slow blog wordpress
    By ralph in forum CMS, Blogs, Blogging, Forums...
    Replies: 8
    Last Post: 02-13-2013, 10:41 PM
  3. Converting site for mobile view
    By brett in forum Website Planning, Design & Development
    Replies: 4
    Last Post: 03-26-2012, 04:27 AM
  4. Can someone help me with table less and table design
    By hdhsiuo in forum Website Planning, Design & Development
    Replies: 2
    Last Post: 08-14-2011, 05:37 PM
  5. Replies: 3
    Last Post: 06-14-2011, 03:52 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts