流体和固定柱表

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

也许我可以帮忙，也许不会。

首先，我会使用div而不是tr / td。老实说，自从引入CSS以来，我不需要使用表格，而且有些人仍然感到惊讶。但是可能有一个原因，所以请不要把它作为批评。

如果您使用div，请编辑代码的此部分：

.visible {
  overflow:visible;
  min-width: 210px;
}

无论如何，这将确保div至少为210像素宽。它应该工作。 顺便说一句，如果这是页面上唯一的表，并且div或td在它具有最小高度的意义上是唯一的，那么您可能想要使用id而不是类。这将使您的代码更清洁，更优雅。 希望这会有所帮助。

Answer 2

如果您不需要包装，请执行以下操作：

td{
    padding: 10px;  
}

如果需要换行，则需要将table的宽度更改为auto并添加min-width参数。

table{
   width: auto;
   min-width: 100%;
   table-layout: fixed;
}

Answer 3

试试这个，看看它是否接近你想要的东西：

DEMO - 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>

Answer 4

对CSS文件进行了更改

* DEMO - http://jsfiddle.net/KzVbX/2/

table{
   width: 100%;
    table-layout:fixed;
}

td{
    padding: 10px;
}

.fixed{
    background-color: #ddd;
    width: 60px;
}

.fluid{
    background-color: #aaa;
}

.visible{
  overflow:visible;
}

.hidden{
    overflow:hidden;
    max-width:20%;
    white-space:nowrap;
}