Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE9, tables, and display: block

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

ie11

IE9 (Bad result):

ie10

like image 285
JoshuaD Avatar asked Dec 28 '13 21:12

JoshuaD


3 Answers

http://jsfiddle.net/xnKTH/

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

Add a width on the TD and float it.

like image 193
Christina Avatar answered Nov 03 '22 01:11

Christina


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
like image 32
Josh Beam Avatar answered Nov 03 '22 00:11

Josh Beam


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+

like image 43
Slawa Eremin Avatar answered Nov 03 '22 01:11

Slawa Eremin