Question

我有两张桌子。左表应具有自动宽度，以便根据其内容灵活。正确的表我需要填充包含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

不要将显示块直接放到表中，只需在表格周围添加div并浮动div 试试这个样本它可能适合你

here http://codepen.io/anon/pen/jPBbrW

Answer 2

此解决方案可以帮助您，

将每个'用'分开'包裹起来。使左表包装'.table1'作为浮动左右表包装'.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>

两张桌子并排，填充剩余宽度

2 个答案: