JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<table id="tablex">
    <thead>
        <tr>
            <th id="header" colspan="4">header</th>
        </tr>
    </thead>
        <tfoot>
        <tr>
            <td id="footer" colspan="4">footer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td class="margin" rowspan="2"></td>
            <td id="panel" rowspan="2">panel panel panel panel panel panel panel</td>
            <td id="tabs">tabs</td>
            <td class="margin" rowspan="2"></td>
        </tr>
        <tr>
            <td id="content">content content content content content</td>
        </tr>
    </tbody>
</table>

<br />

<p>tabs height should remain at 10px, as specified. only content should expand as side panel fills, but in IE7/8/9 (maybe ie6, too?), tab height is recalculated despite having a fixed height. this is probably not as reduced a testcase as it can be. the rowspans seem necessary to trigger the bug</p>

CSS

#tablex {
    border-collapse: separate;
    border: 1px solid silver;
    border-spacing: 0;
    width: 300px;
}

#header {
    height: 30px;
    background: orange;
}

#footer {
    height: 30px;
    background: pink;
}

#panel {
    width: 50px;
    background: lightblue;
}

#content {
    background: yellow;
}

.margin {
    width: 15px;
    background: lime;
}

#tabs {
    height: 10px;
    background: orchid;
}

/* reset ff padding */
td {
    padding: 0;
}