如何用纯CSS实现动态宽度表格表头超长时显示省略号

我有如下表格：

<table>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Column 2 header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1 content</td>
            <td>Column 2</td>
        </tr>
    </tbody>
</table>

我希望实现：当表头内容超过对应列的最大内容宽度时，表头显示省略号。例如上述表格的第二列表头应显示为“Column 2 h...”，第一列表头完整显示。

使用table-layout:fixed无法满足需求，因为它会让列宽固定且均等，而我无法预先设置列宽（内容来自服务器，长度未知）。浏览器默认的自适应调整效果不错，但我需要表头宽度不超过列宽，超长时显示省略号。

我曾尝试在<th>内添加<div>，设置width: 100%及省略号相关样式（white-space: nowrap; overflow: hidden;等），但这只会让表格宽度被撑开，表头始终完整显示内容。

请问是否存在仅使用CSS属性实现表头宽度不超过列宽、超长时显示省略号的方法？

可以通过以下纯CSS方案实现需求，核心是让表头内部的内容容器不撑开列宽，而是继承列的实际宽度（由tbody内容决定）：

• 给表格设置width: 100%;（或合适的宽度限制），确保表格不会无限制撑开；
• 给<th>添加position: relative;，为内部容器提供定位参考；
• 在<th>内嵌套一个容器（比如<span>或<div>），设置省略号相关样式并绝对定位；
• 给<th>设置white-space: nowrap; overflow: hidden;，并添加最小高度保证排版正常。

完整代码示例（嵌套容器版） #

<style>
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ccc;
    padding: 8px;
}
th {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    min-height: 1.5em; /* 适配内容高度，避免内容溢出 */
}
th > span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: inherit; /* 继承th的内边距，保证排版一致 */
}
</style>

<table>
    <thead>
        <tr>
            <th><span>Col 1</span></th>
            <th><span>Column 2 header</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1 content</td>
            <td>Column 2</td>
        </tr>
    </tbody>
</table>

无额外嵌套版（用伪元素） #

如果不想添加额外的HTML元素，可以通过data-*属性传递表头内容，配合::before伪元素实现：

<style>
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ccc;
    padding: 8px;
}
th {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    min-height: 1.5em;
}
th::before {
    content: attr(data-header);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: inherit;
}
</style>

<table>
    <thead>
        <tr>
            <th data-header="Col 1"></th>
            <th data-header="Column 2 header"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1 content</td>
            <td>Column 2</td>
        </tr>
    </tbody>
</table>

方案原理 #

• 表格列宽由tbody中的<td>内容自动计算，保留浏览器默认的自适应效果；
• <th>设置position: relative后，内部的绝对定位容器会完全贴合<th>的宽度，不会触发列宽撑开；
• 当表头内容长度超过<th>的宽度（即列宽）时，自动触发text-overflow: ellipsis的省略号效果。

内容的提问来源于stack exchange，提问作者Unapedra