问题:

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):

回答1:

http://jsfiddle.net/xnKTH/

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

Add a width on the TD and float it.

回答2:

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

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

回答3:

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+