Grow your CSS skills. Land your dream job.

Modifying a table for use on an iPad

  • KW1
    # October 2, 2012 at 1:30 am

    I am developing a site that is using tables to display 8 images (two rows of four). The table functions well on a desktop, but has no responsivity.

    I came across this [article](http://css-tricks.com/responsive-data-tables/ “article”) and appreciated the simplicity of the solution. I was able to insert the following code:
    @media only screen and (max-width:480px){
    table,thead,tbody,tfoot,th,td,tr{display:block}
    tr+tr{margin-top:1em}
    }

    That worked fine to create one column with 8 “rows” for the iPhone display.

    On a tablet, it looks weird, either we lose columns or end up with one column and much white space.

    Any simple ideas on how to format the above code to create 2 columns?

    Sorry if this is painfully obvious. I don’t know how to write code, I know how to copy, paste, and test. So far, that has helped me customize my website a great deal!

    Thanks for the help.

    # October 2, 2012 at 5:41 am

    Here’s the thing…I wouldn’t start with a table to display images…there are much better solutions that will work better ‘out of the box’ for desktop and mobile.

    Once you have told a table to do something (have 4 columns for instance)…that’s it, you can’t suddenly tell it to have only 2 columns.

    If you could let us look at your existing site (with a link) we might be able to help further.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".