我有一张像下面这样的桌子：
<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>
我想实现的是，当列的内容大于列的最大内容宽度时，列的标题就会有一个省略号。因此，对于这个表，结果应该是这样的：
如您所见，第一列的所有内容都可见，因为它小于列的TD宽度，但第二列的标题带有省略号。
像table-布局：固定这样的表格布局没有帮助，因为这将使所有列具有固定（和相等）宽度，我根本不想为任何列设置宽度。它们有不同的内容，这些内容来自服务器，所以我不知道它们会有多长。
浏览器负责调整大小，并且做得很好，但是我需要标题不要大于列的最大内容宽度，如果大于，请应用省略号。
我尝试创建一个
我还搜索了net和stackoverflow，但是所有的问题似乎都很旧，或者它们没有真正考虑到它的“动态”部分。
有没有办法使标题宽度不大于列的宽度，如果是，请仅使用CSS属性对其应用ellpsis？
谢谢你。
如果您能够添加额外的包装器，您可以像下面这样做。使用包含：inline-size您告诉浏览器在定义inline-size（您的情况下的宽度）时忽略其内容。
table,
tr > * {
border: 1px solid;
}
span {
display: block;
contain: inline-size; /* the content won't affect the size */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}<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>