Bootstrap Responsive Tables with "display: table" body element

Question

To get my layout to stretch to a full page, I'm using Sticky CSS Footers. This approach requires me to set the html Body to "display: table".

Everything works fine except for the responsive tables in Bootstrap. These still stretch out past the display window.

Here's an example: http://jsbin.com/wifomelabu/1/edit?html,css,js,output (minimize the browser to see the problem)

If you remove "display: table" from the body it works fine.

Is there any way to get the responsive tables to work with the "display: table" body element? Or do I have to find a new way to stretch my layout to a full page?

Answer 1

Use

td {
  width: 100px;
}

instead of

td {
  min-width: 100px;
}

See this example http://jsbin.com/jesitabiya/1/