如何使表格列的宽度最小化？

Question

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

我试图让表格的10列中的8列仅占用它们所需的最小宽度，基于文本内容，同时考虑到填充和列标题。

在示例图片中，除第4列和第9列外，我希望所有列都只占据最小宽度。技术上，有9个列标题，最后一个标题具有colspan为2的属性。最后一个标题是span3。我想让百分比列仅占据所需的最小宽度，然后让进度条或通过/查看/失败按钮占据其余空间。

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

示例图片：

- jnesselr

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-based方法现在在所有现代浏览器上都可以正常工作。原始代码仍然在链接的JSFiddle中被注释掉。

- John Weisz

---

补充说明：之前的宽度计算解决方案对于文本返回了“auto”宽度，我已经更新了答案以反映更改。 - John Weisz

如果有人遇到这个问题，想要使每一列都具有最小宽度，那么这是行不通的。这取决于至少有一列没有“min”类。 - Borophyll

Answer 2

对于 Bootstrap 4，你可以使用类 text-nowrap 而不是自己编写 CSS。

<td class="text-nowrap">

- Jess

Answer 3

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

这是一个帮助我解决类似问题的链接 http://css-tricks.com/fixing-tables-long-strings/

- Vall3y

---

我更新了我使用的模板文件，因为我忘记推送当前版本以便您查看。它设置为固定表格布局，但我不知道是否正确。由于文本内容可能会更改，我不知道列的宽度将是多少。 - jnesselr