How to format table to something mobile friendly?

Question

I'm working on my first mobile version of a website. I have 1000s of articles which contain HTML tables in them. Unfortunately, they have fixed widths and have been used to layout content in some cases (mainly photo galleries).

I was wondering if anyone had any suggestions on ways to go through and format these tables so they display nicely on a mobile screen without the need of scrollbars? Like concerting to a list or a series of divs. Any ideas?

I'm using jQuery mobile as my framework and code in PHP.

The current only 'fix' I can think up is wrapping tables in a <div> with width:100% and overflow-x:auto .

Answer 1

Effectively, you'd be breaking the table with css, but you could try something like this:

table{
  width: 100%;
}
tr{
  display: block;
}
td{
  float: left;
  width: 24%
}

That will make things act more like a bunch of divs than table rows and cells. For actual tabular data, I really wouldn't recommend this. But for galleries and layouts you should be ok.