html - 如何使表格列为最小宽度

Question

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

我正在尝试使表格的 10 列中的 8 列仅占据它们需要的最小宽度，基于文本，尊重填充和列标题。

在示例图像中，我希望除第 4 和第 9 列外的所有列都占据最小宽度。从技术上讲，有 9 个列标题，最后一个的 colspan 为 2。最后一个标题是 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

正如您在上面的 fiddle 中看到的那样，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 获得, 注释掉了。