自动调整 HTML 表格中的列宽

Posted 2023-03-06

【中文标题】自动调整 HTML 表格中的列宽

【英文标题】：Auto-Adjusting column width in HTML table

【发布时间】：2018-08-11 04:51:51

【问题描述】：

我正在创建一个包含用户 URL 历史记录的表。数据是使用 php 从 SQL 数据库中收集的，表格是根据用户使用下图中的复选框选择的数据生成的。

我希望表格使用页面的整个宽度，就像它目前所做的那样。但是我希望自动调整列宽。正如您在图像中看到的，各种列比它们需要的要宽得多。

我在下面附上了我正在使用的 CSS 代码。

任何帮助将不胜感激。

    table#DisplayData 
    border-spacing: 0;
    width: 100%;
    table-layout:fixed;
    border: 1px solid #ddd;
    word-wrap:break-word
    

    table#DisplayData th, td 
    text-align: left;
    border: 1px solid #ddd;
    word-wrap:break-word
    margin: auto;
    

【问题讨论】：

您希望每列的宽度取决于什么？你可能需要一个 JS 解决方案，或者百分比宽度列。

理想情况下某些列的标题长度。但是，对于诸如 Url 之类的行，我希望它们尽可能长，但仍然水平停留在页面上？

我推荐硬编码的百分比宽度列。您可以在cols 上使用<colgroup>、<col>、table-layout: fixed 和width: X%。

【参考方案1】：

将您的table-layout 更改为auto（或不包括它，因为auto 是默认值）。

一个演示from MDN：

【讨论】：

如果我使用 'auto' 或完全去掉那条线，我的桌子就会跑到页面的一边。

如果您已经尝试过，能否在您的问题中提供一个可验证的示例？否则我很难完全回答。