html - 并排两个表格，填充剩余宽度

Question

我有两张 table 。左表应具有自动宽度，以便根据其内容灵活调整。右表我需要填充包含 div 的剩余宽度。

我知道我可以通过将 table.b 设置为 display: block 来做到这一点，但是这样做的问题是它在 IE9 及以下版本中没有效果。我需要一个适用于 IE6(或尽可能接近)的解决方案。

table.a {
    background-color: blue;
    float: left;
}

table.b {
    background-color: red;
    /* display: block; Can't do display block because setting table as block on <= IE 9 doesn't work */
}

<table class="a">
    <tr>
        <td>Hello1</td><td>Test1</td>
    </tr>
</table>
<table class="b">
    <tr>
        <td>Hello2</td><td>This table should fill remaining width</td>
    </tr>
</table>

Answer 1

这个解决方案会帮助你，

用单独的 '' 包裹每个。将左表包装器“.table1”设置为 float ，将左表包装器“.table2”设置为溢出隐藏。多田!!

https://jsfiddle.net/raaj_obuli/jt71ywwm/1/

body {
  margin: 0;
  padding: 0;
}
.table1 {
   float: left;
  background: #bbb;
}
.table2 {
  overflow:hidden;
  background: #afa;
}

<div class="table1">
<table class="a" >
    <tr>
        <td>Hello1</td><td>Test1</td>
    </tr>
</table>
</div>
<div class="table2">
<table class="b" width="100%">
    <tr>
        <td>Hello2</td><td>This table should fill remaining width</td>
    </tr>
</table>
</div>