Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Add the strict doctype to your page, otherwise IE is in quirks mode:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; </code></pre> <p>With that at the top of the file it works in IE8 for me.</p> <h2>EDIT</h2> <p>Well on further research I'm pretty sure IE8's table support is completely buggy. I added a wrapper element on the text so that I could mimic a table exactly (code below). Then I put an actual table below that. The table works exactly as you want it, but the equivalent in divs does not. I tried other elements like spans but it still doesn't work.</p> <p>In short: use ordinary tables if you can, or rethink your layout.</p> <p>Here's the code I used. The two "tables" should be exactly the same, save a little padding here and there:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;whatever&lt;/title&gt; &lt;style&gt; .box { display: table; width: 250px; border: 1px solid red; padding: 10px; padding: 5px; } .top { display: table-row; margin: 10px; padding: 5px; } .bottom { display: table-row; margin: 10px; padding: 5px; } .top .cell { display: table-cell; border: 1px solid blue; margin: 5px; padding: 5px; } .bottom .cell { display: table-cell; border: 1px solid green; margin: 5px; padding: 5px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="box"&gt; &lt;div class="top"&gt; &lt;div class="cell"&gt;top&lt;/div&gt; &lt;/div&gt; &lt;div class="bottom"&gt; &lt;div class="cell"&gt;bottom oooooooooooooooooooooooooooooooooooooooooooooooooo&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;br&gt;&lt;br&gt; &lt;table style="border: 1px solid red; display: table;width: 250px"&gt; &lt;tr style="display: table-row;"&gt; &lt;td style="border: 1px solid blue; display: table-cell;"&gt;top&lt;/td&gt; &lt;/tr&gt; &lt;tr style="display: table-row;"&gt; &lt;td style="border: 1px solid green; display: table-cell;"&gt;bottom oooooooooooooooooooooooooooooooooooooooooooooooooo&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload