使用 table-layout: fixed 可防止表格列宽被内容撑开，通过设定固定宽度和文本换行处理，确保布局稳定，适用于响应式设计。
在使用CSS盒模型处理HTML表格时，经常会遇到表格单元格内容过多导致列宽自动撑开，破坏布局的问题。尤其在响应式设计中，过宽的单元格会让表格在小屏幕上横向溢出。解决这个问题的关键是使用 table-layout: fixed 来控制表格的宽度分配。
为什么单元格会过宽？
默认情况下，表格的 table-layout 属性值为 auto，浏览器会根据单元格内容自动计算列宽。如果某列包含长文本或没有空格的字符串（如长URL），该列就会被撑得很宽，影响整体布局。使用 table-layout: fixed 控制列宽
将表格的 table-layout 设置为 fixed 后，表格的列宽不再由内容决定，而是由第一行单元格的宽度或设定的 width 值决定。这样可以有效防止内容撑破布局。示例代码：
<table style="width: 100%; table-layout: fixed;">
<tr>
<td style="width: 25%;">固定宽度列</td>
<td style="width: 25%;">内容很长的文字内容不会撑开这一列</td>
<td style="width: 50%;">剩余空间分配</td>
</tr>
</table>
关键点：
- 必须设置 table-layout: fixed
- 建议给
<table>设置明确的 width，如 100% - 通过设置第一行
<td>或<th>的 width 来控制各列比例 - 超出内容可配合 word-wrap: break-word 或 overflow: hidden 处理
配合文本控制优化显示
在 fixed 布局下，若希望长文本自动换行，可添加以下样式：
td {
word-wrap: break-word; /* 允许长单词换行 */
overflow: hidden; /* 或隐藏溢出内容 */
white-space: normal; /* 允许换行 */
}
这样即使单元格内有无空格的长字符串，也能在固定宽度内合理显示，避免横向滚动。
立即学习“前端免费学习笔记（深入）”；
基本上就这些。用 table-layout: fixed 是控制表格列宽最有效的方式，特别适合数据表格、表单布局等需要稳定结构的场景。搭配合理的宽度设置和文本处理，能彻底解决单元格过宽的问题。
