CSS/HTML父元素宽度设置问题：TD宽度不生效致文本无法截断

问题重现 #

给<td>设置了width:10px，但内部带省略号样式的<div>文本始终完整显示，未按预期截断。相关代码如下：

原CSS代码 #

.class-test {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
}

原HTML代码 #

<body>
  <table>
    <tr>
      <td style="width:10px">
        <div class="class-test">
          aaaaabbbbbbbbbcccccccccccttttttt
        </div>
      </td>
    </tr>
  </table>
</body>

问题原因 #

表格默认使用table-layout: auto布局模式，会自动根据单元格内容拉伸列宽，导致给<td>设置的width:10px被忽略，内部<div>的width:100%自然也无法限制在指定宽度内，省略号样式失效。

解决方案 #

给表格添加table-layout: fixed样式，强制表格按指定列宽布局，同时确保单元格宽度设置生效。

修改后的完整代码 #

CSS代码

.table-fixed {
  table-layout: fixed;
  width: 100%; /* 可选，让表格占满容器宽度，配合滚动时更友好 */
}

.class-test {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
}

HTML代码

<body>
  <!-- 给表格添加自定义类，开启fixed布局 -->
  <table class="table-fixed">
    <tr>
      <td style="width:10px">
        <div class="class-test">
          aaaaabbbbbbbbbcccccccccccttttttt
        </div>
      </td>
    </tr>
  </table>
</body>

扩展适配滚动缩放场景 #

如果需要表格宽度随容器滚动缩放时，文本仍保持省略号显示，可以给表格套一个带横向滚动的容器：

<body>
  <div style="overflow-x: auto; max-width: 300px;">
    <table class="table-fixed">
      <tr>
        <td style="width:10%"> <!-- 用百分比适配容器缩放 -->
          <div class="class-test">
            aaaaabbbbbbbbbcccccccccccttttttt
          </div>
        </td>
        <td style="width:90%">
          其他单元格内容
        </td>
      </tr>
    </table>
  </div>
</body>

这样容器缩放时，<td>宽度会按比例变化，内部<div>的文本会自动截断并显示省略号。

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