流体和固定柱表

Question

我的布局上有一个有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;
}

http://jsfiddle.net/KzVbX/

它几乎按预期工作.除了最后一栏.

Answer 1

尝试一下，看看它是否接近您正在寻找的内容：

演示 - http://jsfiddle.net/WGpB3/

<table width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr>
            <td style="width:60px;">&nbsp;</td>
            <td style="width:60px;">&nbsp;</td>
            <td style="overflow:hidden;">&nbsp;</td>
            <td style="width:60px;">&nbsp;</td>
            <td style="overflow:visible;">&nbsp;</td>
    </tr>