I'm going to be converting a site to responsive and there is a schedule of events on the site that's in a table, so I've been researching how to accomplish getting a table layout into responsive mode. I've read a lot and looked at tutorials and thought I'd ask here what folks are using for their data that has to be in a table layout.

Percentage width Tables are tough to pull off in FluidGrid Layouts because they always remain as wide as content dictates them to be.

One approach is to create 3 tables with IDs: one for mobile, one for tablets and one for desktop/laptops. Then using media queries add display:none to those IDs you don't want to appear on target devices.

Alternatively, you might be able to use Definition Lists for your events. I like Definition Lists because they are more flexible than tables and you wouldn't be repeating content as above.

You would still need to set the table width as a percentage width like:

<table width="80%" cellspacing="0" cellpadding="0" border="0">

<tr>

<td width="25%">Data</td>

<td width="25%">Data</td>

<td width="25%">Data</td>

<td width="25%">Data</td>

</tr>

<tr>

<td>Data</td>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

</table>

And just like any other responsive design IF the browser window gets too narrow for the original data information table to be displayed nicely you'll have to find another way of laying it out then hide the original table and show the alternative one in your media queries css.

You can control the size of cells and what-not with css, then make changes in the media queries of a responsive design to get them to fit on smaller screens if needed.

Usually when people ask about tables, they're not asking about actual tabular data (like a spreadsheet) but lines of images stacked like a table. For anything other than tabular data, I use <div> tags and the float:left or float:right css attributes to give a table-like look and reflow according to the browser window width.

You can control the size of cells and what-not with css, then make changes in the media queries of a responsive design to get them to fit on smaller screens if needed.

The only problem I see is if a table of data is wide then it has nowhere to go once the viewport is reduced to phone size. In that senario you probably would have no alternative but to find an alternative way of laying out the tabular data, whether that's in another table or some other container is a problem to be solved.

Generally for a "the table is too big" situation, I would put it into a scrolling <div> so the width is good on the smallest device. Maybe put in a "click here to view the entire table" link to a page with an unmodified table or something.

Generally for a "the table is too big" situation, I would put it into a scrolling <div> so the width is good on the smallest device. Maybe put in a "click here to view the entire table" link to a page with an unmodified table or something.

Be a bit of a nightmare for the end user though in a scrolling <div> if the data needs to all be viewed at once? Humm how can one view the entire table on a smartphone if its too wide, link or no link?

Its a nice example in a situtaion which requires limited data. Increase that to 12 cols and 30 lines and then try and follow what is going on once some real data has been entered when the browser viewport is decreased

It responds very nicely to decreased browser viewport widths, actually - did you try?

Yes, I also went one stage further by adding real data and more columns and rows. As I said its ok for limited data but try and follow what's going on when the tags turn as the viewport decreases when double or tripple the data is added.

I guess if that happens then a decision has to be made as to whether to include the tabular data for smartphones.

I would need more rows/cols for sure... and the data for this particular site is crucial as it shows the times, places and who is playing at various locations for the music festival and can't be left off the mobile device version.

I would need more rows/cols for sure... and the data for this particular site is crucial as it shows the times, places and who is playing at various locations for the music festival and can't be left off the mobile device version.

Why not just set up a month <div> area - April, May, June,

Then along the top 1st 2nd 3rd 4th 5th, include the days of the month that the gigs fall on and put the information into tabbed panels

So on a desktop you could have 3 rows of 4

Jan, Feb, Mar, Apr

May, Jun, Jul, Aug

On the tablet it would repond down to

4 rows of 3:

Jan, Feb, Mar

Apr, May, June

and once it gets down to smartphone

I guess you could have 6 rows of 2

Jan, Feb,

Mar Apr,

May, June

OR 12 rows of 1

Jan,

Feb,

Mar

Apr,

May,

June

I guess the music festival only lasts for a day or maybe two but you could use time-spots - 10am-2pm - to replace the month names.

...I'm kind of opposed to separate mobile sites, I believe that there is a way to present all the info to all the people no matter the device. With that said here's a link to the schedule. http://www.americanrivermusic.org/schedule.php ..there will be the names of the bands playing next to the time:location areas. I'll have to play with getting it all responsive.

I could understand it for super large sites but even the Huffington post didn't take that approach when they reworked their site..but I could see where you might use that approach when reworking an older site for sure.

Adobe just launched a preview of their Edge Reflow product...thoughts??