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):
td {
width: 100%\9;
float: left\9;
}
Add a width on the TD and float it.
Some useful links (if you haven't already checked them out):
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+
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With