do { enjoy(); } while ( designing == play );

As for my mind, tables are not to be used for layout. I do use tables are for lists of data. And at the age of responsive design they have to support responsibility.

Solution #1:
For the last time I work a lot with Bootstrap. There are a lot of pre-ready solutions, which help to save my time. Bootstrap framework proposes it’s own variant of responsive tables – you should wrap ‘table’ into ‘div’ element with .table-responsive class:

<div class='table-responsive'>

<table class='table'>

…

</table>

</div>

Horizontal scroll appears at the bottom of the table on small devices.
You can find an alive example as Variant 1. Solution #2:
Another clever solution was proposed by David Bushell. His tables change orientation on small screens and a horizontal scroll is used to view more data. You can find an alive example as Variant 2.. The trick is to use display:inline-block; on the table rows and white-space:nowrap; on the table body.

I have had an issue in case of big number of signs at the cell, in other words, in case of long title – for smaller screen sizes I got an empty space at the right hand side of the table. My improvement was to add

#flip-scroll td {overflow:hidden;}

#flip-scroll tbody tr {width:100%;}

Another bug I found appeared at IE9: the property ‘display:block;’ has no effect. The table renders exactly as if I don’t set that property. The main problem is that the cells don’t break; they all render on one line. My solution is to be back to usual look & feel of table for IE9 – as it is at older browsers. Also I have to rewrite styles for borders (please pay attention, I work with the Bootstrap table class=’table-bordered’). I added conditional stylesheet for IE9 only: