Html 如何使表格列成为最小宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26983301/
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
How to make a table column be a minimum width
提问by jnesselr
Here is the template data file: https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs
这是模板数据文件：https: //github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs
I'm trying to make 8 of the 10 columns of a table to only take up exactly the minimum width that they need to, based on the text, respecting the padding and column headers.
我试图让表格的 10 列中的 8 列仅占据他们需要的最小宽度，基于文本，尊重填充和列标题。
In the example image, I want all but the 4th and 9th columns to take up the minimum width. Technically, there are 9 column headers, and the last one has a colspan of 2. The last header is a span3. I'd like the percentage column to take up the least width that is needed, and let the progress bar or the pass/view/fail buttons take up the rest.
在示例图像中，我希望除第 4 列和第 9 列之外的所有列都占据最小宽度。从技术上讲，有 9 个列标题，最后一个的 colspan 为 2。最后一个标题是 span3。我希望百分比列占据所需的最小宽度，让进度条或通过/查看/失败按钮占据其余部分。
Column 4 is set up to replace overflowed text with an ellipsis.
第 4 列设置为用省略号替换溢出的文本。
Example image:
示例图像：
回答by John Weisz
There is a trick that involves setting some cells to a very small width, and then applying a white-space: nowrapproperty:
有一个技巧涉及将一些单元格设置为非常小的宽度，然后应用一个white-space: nowrap属性：
<table>
<tr>
<td class="min">id</td>
<td class="min">tiny</td>
<td>Fills space</td>
<td>Fills space</td>
<td class="min">123</td>
<td class="min">small</td>
<td>Fills space, wider</td>
<td>Fills space</td>
<td class="min">thin</td>
</tr>
</table>
td {
width: auto;
}
td.min {
width: 1%;
white-space: nowrap;
}
As you can also see in the above fiddle, nowrapforces the table cell to prevent any line-breaks, and thus align its width to the smallest possible.
正如您在上面的小提琴中所看到的，nowrap强制表格单元格防止任何换行符，从而将其宽度尽可能地对齐。
NOTE: If you have a thead, you want to apply the td's stylings to thas well.
注意：如果您有thead，您也想应用td的样式th。
UPDATE #1: Ellipsis (...)
更新 #1：省略号 (...)
To automatically collapse a longer column into ellipses, the text-overflow: ellipsisis what you are likely looking for:
要将较长的列自动折叠为椭圆，这text-overflow: ellipsis就是您可能正在寻找的：
td.cell-collapse {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
This also requires overflowset to hidden, as well as a widthor max-widthwith a fixed value. Add the cell-collapseclass to cells whose width you would like to limit.
这也需要overflow设置为hidden，以及具有固定值的width或max-width。将该cell-collapse类添加到要限制其宽度的单元格中。
UPDATE #2: Handling Bootstrap
更新 #2：处理 Bootstrap
Bootstrap's tableclass sets width: 100%;which will mess up this approach. You can fix that with table { width: inherit !important; }
Bootstrap 的table类集会破坏width: 100%;这种方法。你可以用table { width: inherit !important; }
NOTE: The tables in this approach already have full width because table cells already have width: auto;.
注意：这种方法中的表格已经有全宽，因为表格单元格已经有width: auto;.
Previous Javascript-base solution removed, since the pure CSS-based approach now works consistently across all modern browsers. The original code is still available at the linked JSfiddle, commented out.
以前的基于 Javascript 的解决方案已被删除，因为纯基于 CSS 的方法现在可以在所有现代浏览器中一致地工作。原始代码在链接的JSfiddle 中仍然可用，已注释掉。
回答by Vall3y
If you know the sizes you want your column and they are fixed, I suggest using a fixed table layout. It allows you to specify the fixed % each column takes.
如果你知道你想要的列的大小并且它们是固定的，我建议使用固定的表格布局。它允许您指定每列采用的固定百分比。
Here's a link that helped me in a similar situation http://css-tricks.com/fixing-tables-long-strings/
这是在类似情况下帮助我的链接 http://css-tricks.com/fixing-tables-long-strings/
