如何让HTML表格固定列宽 不随td内容长度自动调整宽度

仅设置padding、元素width、内边距无法解决列宽被内容挤压的问题，本质原因是HTML表格默认采用自动布局逻辑：默认table-layout: auto模式下，浏览器会遍历所有单元格的内容长度计算列宽，某列内容过长时会自动撑宽该列、挤压相邻列，导致列宽无法保持一致。

实现方法 #

给表格配置对应CSS属性即可达到预期效果：

• 给table元素设置*table-layout: fixed*，启用固定布局模式：列宽由表格总宽度和第一行的列宽度设定决定，不再随后续单元格的内容长度动态调整
• 给table元素设置width: 100%：固定布局模式下如果不给单独列指定宽度，所有列会自动均等分配表格总宽度
• 可选配置：给th、td设置word-break: break-word，让单元格内过长的内容自动换行，避免内容溢出单元格边界

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
  /* 长内容自动换行，避免溢出单元格 */
  word-break: break-word;
}
table {
  border-spacing: 15px;
  width: 100%;
  /* 核心配置：启用固定布局锁死列宽规则 */
  table-layout: fixed;
}
</style>
</head>
<body>

<h2>固定等宽列表格</h2>
<p>列宽不会随单元格内容长度变化，所有列宽度保持均等</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
  <!-- 长内容测试：不会撑宽当前列，也不会挤压相邻列 -->
  <tr>
    <td>这是一段很长的测试文本，用来验证列宽固定效果，不管内容写多长，列宽都保持初始设定的均等比例</td>
    <td>TestContent</td>
    <td>100</td>
  </tr>
</table>

</body>
</html>

扩展说明 #

如果不需要所有列保持等宽，只需要给第一行的<th>元素设置对应width值（支持百分比、固定像素单位），固定布局模式下浏览器会直接按照第一行设定的宽度分配列空间，不会再参考后续行的内容长度计算宽度，同时这种模式的渲染性能比默认自动布局更高。

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