Should I use tables?

Garrett Dimon:

Data tables don't do so well with responsive design. Just sayin'.

He has a good point. Data tables can be quite wide, and necessarily so. A single row of data needs to be kept together to make any sense in a table. Tables can flex in width, but they can only get so narrow before they start wrapping cells contents uncomfortably or just plain can't get any narrower.

Responsive design is all about adjusting designs to accommodate screens of different sizes. So what happens when a screen is narrower than the minimum width of a data table? You can zoom out and see the whole table, but the text size will be too small to read. Or you can zoom in to the point of readability, but browsing the table will require both vertical and (sad face) horizontal scrolling.

So the first answer is to avoid them if you can.  If you must have a table, then you can do a few things to make them (almost) behave for smaller screens.  You will have to do a lot of work and make decisions about dropping some columns or making the table scroll horizontally (sad face).  A small table can work, but larger ones are a nightmare for you and the small screen user.

How do I use a table?

This may void your warranty,
your wife/husband may leave you,
may result in serious injury or death,
Here be Dragons!

OK, so you really want to add a table, then here's've been warned......

It's simple, just click the Table button in the editor and choose the columns and rows!  The dialog contains a default setting in the Stylesheet Classes of "table table-bordered".  The "table" class attempts to make things behave a bit better and the "table-bordered" adds borders to the table/cells.  There is another class you might consider using, "table-striped", which does what you might expect. These classes are listed on the Useful Classes page.

You can use tables!!!

Thanks to some brilliant work by Chris Coyier and the additional comments of a couple of other guys who I can't credit fully (They didn't leave full names, just "Patabugen" and "Tim"), tables can be used!!

Several methods have been demonstrated by various other people that involve various tricks that still involve the small screen user having to figure out how to use and read the table.  The solution by Chris Coyier is in my opinion far the best for thge tables that PSM may need.  He makes every row of the table become a mini table, but with the column headers as the first column, the data of the row is in the second column.  If you don't like this solution, then I refer you back to the top of the page.


Using the table

There is just one step that MUST be used in order for them to function.  You MUST specify the first row of the table as a "header row".