Html 流动和固定柱表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18620663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fluid and Fixed Columns Table
提问by arvere
I have a table on my layout that has 5 columns, 3 of them should be fixed width in px and the other 2 should be fluid.
我的布局中有一个表格，它有 5 列，其中 3 列应该是固定宽度的 px，另外 2 列应该是流动的。
It sounded simple at first, but the problem is the two fluid columns should behave differently.
起初听起来很简单，但问题是两个流体柱的行为应该不同。
The last column should stretch as much as it can to fit its contents, so they are never hidden, but shouldn't ever leave empty space. And the middle column should occupy all the free space it can find, but also overflow to hidden in case the last one needs to grow larger.
最后一列应尽可能多地伸展以适应其内容，因此它们永远不会被隐藏，但不应留下空白空间。中间的一列应该占据它可以找到的所有可用空间，但也要溢出到隐藏，以防最后一列需要变大。
I tried to make this work with css, but I couldn't manage to make it work... Is there a way to do this with pure css or I need js?
我试图用 css 来做这个工作，但我无法让它工作......有没有办法用纯 css 来做到这一点，或者我需要 js？
EDIT
编辑
That's what I got so far:
这就是我到目前为止所得到的：
HTML
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
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;
}
It works almost as expected. Except for the last column.
它几乎按预期工作。除了最后一列。
回答by Ricardo Parker
Maybe I can help, maybe not.
也许我能帮上忙，也许不能。
First, I would use divs instead of tr/td. I honestly don't have a need for using tables since CSS was introduced, and I'm rather surprised that some people still do. But there could be a reason, so please do not take that as criticism.
首先，我会使用 divs 而不是 tr/td。老实说，自从引入 CSS 以来，我就不需要使用表格了，我很惊讶有些人仍然这样做。但可能是有原因的，所以请不要将其视为批评。
If you use divs, then edit this section of your code:
如果您使用 div，请编辑此部分代码：
.visible {
overflow:visible;
min-width: 210px;
}
That will make sure that the div is at least 210 pixels wide no matter what. It should work. BTW, if this is the only table on the page and that div or td is unique in the sense that it has a minimum height, then you may want to use an id instead of a class. That will make your code cleaner and more elegant. Hope this helps.
无论如何，这将确保 div 的宽度至少为 210 像素。它应该工作。顺便说一句，如果这是页面上唯一的表格，并且该 div 或 td 在它具有最小高度的意义上是唯一的，那么您可能想要使用 id 而不是类。这将使您的代码更简洁、更优雅。希望这可以帮助。
回答by Vladimir Kocjancic
If you don't need wrapping do this:
如果您不需要包装，请执行以下操作：
td{
padding: 10px;
}
If wrap is desired, you need to change width of table to auto and add min-width parameter.
如果需要换行，您需要将表格的宽度更改为 auto 并添加 min-width 参数。
table{
width: auto;
min-width: 100%;
table-layout: fixed;
}
回答by Andrew Johnson
Made changes to CSS file
对 CSS 文件进行了更改
*DEMO - http://jsfiddle.net/KzVbX/2/
*演示 - 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;
}
回答by Andrew Johnson
Try this and see if it is close to what you are looking for:
试试这个，看看它是否接近你要找的东西：
DEMO - http://jsfiddle.net/WGpB3/
演示 - http://jsfiddle.net/WGpB3/
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="width:60px;"> </td>
<td style="width:60px;"> </td>
<td style="overflow:hidden;"> </td>
<td style="width:60px;"> </td>
<td style="overflow:visible;"> </td>
</tr>
