如何使表格列为最小宽度

Question

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

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

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

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

示例图像：

原文由 jnesselr 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 的 table 类集 width: 100%; 这会弄乱这种方法。您可以使用 table { width: inherit !important; } 修复它

现场演示

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

---

删除了以前基于 Javascript 的解决方案，因为纯基于 CSS 的方法现在可以在所有现代浏览器中一致地工作。原始代码在链接的 JSfiddle 中仍然可用，已注释掉。

原文由 John Weisz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Vall3y 发布，翻译遵循 CC BY-SA 3.0 许可协议