Responsive tables

Question

I am trying to get the table data I\'m working on responsive in a way which I don\'t think is possible as far as I know, unless other people here think it is?

Basica

Answer 1

Yes it's possible. Set the TD elements to float left and set min-width

http://jsfiddle.net/RnmLF/1/

Just change the size of the container to see it working.

I would look into whether or not you need to use a table though. Tables are only used for displaying tabular data these days (we are not in the 90's any more)

EDIT

I took the liberty to provide a NON table version for accessibility (see @timmied for the reasons why)

http://jsfiddle.net/nW2hx/

Answer 2

If you don't mind using divs instead of table/tr/td, here is one extensive example different options using flexbox: Really Responsive tables using Flexbox. At the most complex level, what you will get is as follows:

First Second Third Fourth Fifth Sixth Seventh Eighth

First  Third  Fifth Seventh
Second Fourth Sixth Eighth

First   Fifth
Second  Sixth
Third   Seventh
Fourth  Eighth

Answer 3

Please check your query at below link, here you can solve your problem of Responsive table

http://css-tricks.com/examples/ResponsiveTables/responsive.php

Answer 4

It can be done, if all your data cells are in one row. (See @webnoob his solution )If not, you might also want to put your data in DIV elements. They can do this easily.

You have no row or column header so I assume you can easily do this, because your data obviously have no relation to it's current column or row.

As said in my comment below, the reason why I mention using something else then table is because it seems not to represent tabular data. Read more here : Why not use tables for layout in HTML?