我有两张 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>
最佳答案
这个解决方案会帮助你,
用单独的 '' 包裹每个。将左表包装器“.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>
关于html - 并排两个表格,填充剩余宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30594276/