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

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;
}

Live demo

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

注意：如果您有thead，则还希望将td的样式应用于th。

---

更新＃1：省略号（...）

要自动将较长的列折叠为省略号，text-overflow: ellipsis就是您可能正在寻找的内容：

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

Live demo

这还需要将overflow设置为hidden，并将width或max-width设置为固定值。将cell-collapse类添加到要限制其宽度的单元格中。

---

更新＃2：处理Bootstrap

Bootstrap的table类集width: 100%;会破坏这种方法。您可以使用table { width: inherit !important; }

解决此问题

Live demo

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

---

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

Answer 2

如果您知道列的大小并且它们已修复，我建议使用固定的表格布局。它允许您指定每列所需的固定百分比。

这是一个帮助我处于类似情况的链接 http://css-tricks.com/fixing-tables-long-strings/