IE9, tables, and display: block

Question

For the low-width mobile version of my site, I switch the display of certain table, tr, td, and th to block, to let them stack vertically. I use this as a technique to allow wide tables to continue to display all of their content without overflowing outside of their container.

It works perfectly in all of the modern 5 browsers, but does not work in IE9. Is there a way to do this there?

Here is a jfiddle: http://jsfiddle.net/cfCzD/4/

Here are screenshots

IE11 (Goal):

IE9 (Bad result):

Answer 1

http://jsfiddle.net/xnKTH/

td {
    width: 100%\9;
    float: left\9;
}

Add a width on the TD and float it.

Answer 2

Maybe you should try to use div tags for table

e.g:

<div style="display:table">
  <div style="display: table-row">
    <div style="display: table-cell">
      content content
    </div>
    <div style="display: table-cell">
      content content content
    </div>
  </div>
</div>

this will work excellent for ie8+

Answer 3

Some useful links (if you haven't already checked them out):

1. CSS Tricks: Responsive Data Tables
   
2. CSS Tricks: Complete Guide to the Table Element