使用 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> 设置明确的 <strong>width</strong>，如 100%<li>通过设置第一行 <code><td> 或 <code><th> 的 width 来控制各列比例<li>超出内容可配合 <strong><a style="color:#f60; text-decoration:underline;" title="word" href="https://www.php.cn/zt/15726.html" target="_blank">word</a>-wrap: break-word</strong> 或 <strong><a style="color:#f60; text-decoration:underline;" title="overflow" href="https://www.php.cn/zt/72718.html" target="_blank">overflow</a>: hidden</strong> 处理</li> <h3>配合文本控制优化显示</h3> <font>在 fixed 布局下，若希望长文本自动换行，可添加以下样式：</font><pre class="brush:php;toolbar:false;"> td { word-wrap: break-word; /* 允许长单词换行 */ overflow: hidden; /* 或隐藏溢出内容 */ white-space: normal; /* 允许换行 */ } </pre><p><font>这样即使单元格内有无空格的长字符串，也能在固定宽度内合理显示，避免横向滚动。</font></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p>基本上就这些。用 <strong>table-layout: fixed</strong> 是控制表格列宽最有效的方式，特别适合数据表格、表单布局等需要稳定结构的场景。搭配合理的宽度设置和文本处理，能彻底解决单元格过宽的问题。</p> </th>
