Evans Evans - 1 month ago 8
CSS Question

Mobile optimise table based website?

I've been tasked to mobile optimised a site with media queries to load specific CSS on narrower browsers. I've just noticed however that the site is built with tables not proper CSS. I know all the reasons why building a site with tables is a terrible idea, but is there any work around that will allow me to break the table into a single column layout with CSS?

Answer Source

That is could be a tough task.

Depending on the mobile browsers you are targeting, and dependant upon the mark-up used (are there other tables present? Can you target the correct layout tables easily, etc.) then I would suggest setting the display property for the layout TD's to block to allow you to free them from the constraints of the table.

CSS like the snippet below should do the trick in modern mobile browsers, though you should consider targeting the intended elements more specifically if possible, so as to not affect other tables.

table, tr, td {
    display: block;

Once you have set the table elements to block, you should then be able to style and position them as necessary for the mobile layout.