9

我的布局上有一个表格，有 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/

它几乎按预期工作。除了最后一列。

4

4 回答 4

2

也许我能帮上忙，也许不能。

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

如果您使用 div，则编辑这部分代码：

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

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

于 2013-09-05T23:40:23.423 回答
1

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

td{
    padding: 10px;  
}

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

table{
   width: auto;
   min-width: 100%;
   table-layout: fixed;
}
于 2013-09-04T19:18:26.283 回答
0

试试这个，看看它是否接近你正在寻找的东西：

演示 - 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>

于 2013-09-04T18:25:52.490 回答
0

对 CSS 文件进行了更改

*演示 - 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;
}
于 2013-09-04T19:29:15.570 回答