Skip to content

Instantly share code, notes, and snippets.

@gunnarbittersmann
Created July 3, 2012 15:24
Show Gist options
  • Select an option

  • Save gunnarbittersmann/3040448 to your computer and use it in GitHub Desktop.

Select an option

Save gunnarbittersmann/3040448 to your computer and use it in GitHub Desktop.
IE table inline formatting bug
/**
* IE table inline formatting bug
*/
section { border: 1px solid; margin: 1em; overflow: hidden; width: 400px }
.compact table, .compact tbody { display: inline }
.compact tr { float: left }
tr { height: 42px; margin: 2px; width: 42px }
.R tr { background: red }
.G tr { background: green }
.B tr { background: blue }
.compact td { display: block }
<section class="compact">
<h1>3 tables with 1 tbody</h1>
<table class="R">
<tbody>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</tbody>
</table>
<table class="G">
<tbody>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</tbody>
</table>
<table class="B">
<tbody>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</tbody>
</table>
</section>
<section class="compact">
<h1>1 table with 3 tbodies</h1>
<table>
<tbody class="R">
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</tbody>
<tbody class="G">
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</tbody>
<tbody class="B">
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</tbody>
</table>
</section>
<section class="compact">
<h1>3 tables without tbody tags</h1>
<table class="R">
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</table>
<table class="G">
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</table>
<table class="B">
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</table>
</section>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment