如何使表格列成为最小宽度 [英] How to make a table column be a minimum width
问题描述
以下是模板数据文件:
正如您在上面的小提琴中看到的那样, nowrap
强制表格单元格以防止任何换行符,并因此将其宽度调整到尽可能最小。
注意:如果您有 thead
,您想要将 td
的样式应用于 th
。
$ hr
$ b
更新#1:省略号(...)
<要自动将较长的列折叠为省略号,
text-overflow:ellipsis
是您可能要查找的内容: td.cell-collapse {
max-width:200px;
overflow:hidden;
文本溢出:省略号;
}
这也需要 overflow
设置为隐藏
,以及宽度
或 max-width
与一个固定值。将 cell-collapse
类添加到您想限制宽度的单元格中。
UPDATE#2:处理引导程序
引导程序的表类集
宽度:100%;
这会搞砸这个方法。你可以用 table {width:inherit!important; }
现场演示注意:此方法中的表已经具有全宽,因为表单元格已经具有 width:auto; $ c $
先前基于Javascript的解决方案已被删除,所有现代浏览器。链接的 JSfiddle 中仍有原始代码,已注释。
Here is the template data file: 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.
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.
Column 4 is set up to replace overflowed text with an ellipsis.
Example image:
There is a trick that involves setting some cells to a very small width, and then applying a white-space: nowrap
property:
<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, nowrap
forces the table cell to prevent any line-breaks, and thus align its width to the smallest possible.
NOTE: If you have a thead
, you want to apply the td
's stylings to th
as well.
UPDATE #1: Ellipsis (...)
To automatically collapse a longer column into ellipses, the text-overflow: ellipsis
is what you are likely looking for:
td.cell-collapse {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
This also requires overflow
set to hidden
, as well as a width
or max-width
with a fixed value. Add the cell-collapse
class to cells whose width you would like to limit.
UPDATE #2: Handling Bootstrap
Bootstrap's table
class sets width: 100%;
which will mess up this approach. You can fix that with table { width: inherit !important; }
NOTE: The tables in this approach already have full width because table cells already have 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.
这篇关于如何使表格列成为最小宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!