如何使表格列成为最小宽度

Question

这是模板数据文件:https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs

我正在尝试使表格的10列中的8列仅根据文本,根据填充和列标题,准确地占据它们所需的最小宽度.

在示例图像中,我希望除了第4列和第9列之外的所有列都占用最小宽度.从技术上讲,有9个列标题,最后一个有一个2的colspan.最后一个标题是span3.我希望百分比列占用所需的最小宽度,让进度条或通过/查看/失败按钮占用其余部分.

第4列设置为用省略号替换溢出的文本.

示例图片:

Answer 1

有一个技巧涉及将一些单元格设置为非常小的宽度,然后应用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;
}

现场演示

正如您在上面的小提琴中所看到的那样,nowrap强制表格单元格以防止任何换行符,从而将其宽度与可能的最小值对齐.

注意:如果你有thead,你也想要应用它td的样式th.

更新#1:省略号(...)

要自动将较长的列折叠为省略号,text-overflow: ellipsis您可能正在寻找:

td.cell-collapse {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

现场演示

这也需要overflow设置为hidden,以及具有固定值width或max-width具有固定值.将cell-collapse类添加到要限制其宽度的单元格.

更新#2:处理Bootstrap

Bootstrap的table类集会破坏width: 100%;这种方法.你可以解决这个问题table { width: inherit !important; }

现场演示

注意:此方法中的表已经具有全宽,因为表格单元格已经具有width: auto;.

以前的基于Javascript的解决方案已被删除,因为基于CSS的纯方法现在可以在所有现代浏览器中保持一致.注释掉了原始代码仍然可以在链接的JSfiddle中找到.