我的布局上有一个表格,有 5 列,其中 3 列应该是固定宽度(以 px 为单位),另外 2 列应该是流动的。
起初听起来很简单,但问题是两个流体柱的行为应该不同。
最后一列应该尽可能地伸展以适应其内容,因此它们永远不会被隐藏,但也不应该留下空白空间。并且中间一列应该占据它可以找到的所有空闲空间,但也要溢出到隐藏,以防最后一个需要变大。
我试图用css来做这个工作,但我无法让它工作......有没有办法用纯css或者我需要js来做到这一点?
编辑
这就是我到目前为止得到的:
HTML
<table>
<tr>
<td class="fixed">fixed</td>
<td class="fixed">fixed</td>
<td class="fluid hidden">fluid</td>
<td class="fixed">fixed</td>
<td class="fluid visible">this content should always be visible</td>
</tr>
</table>
CSS
table{
width: 100%;
table-layout: fixed;
}
td{
padding: 10px;
white-space: nowrap;
}
.fixed{
background-color: #ddd;
width: 60px;
}
.fluid{
background-color: #aaa;
}
.visible{
}
.hidden{
overflow:hidden;
}
它几乎按预期工作。除了最后一列。