table-layout: auto 下 width 是建议值而非强制约束，内容过长会撑开列宽；改用 fixed 模式后需通过 或首行单元格定义列宽，且需配合 word-break、box-sizing 等样式防溢出。
table-layout: auto 下 width 是建议值，不是强制约束
直接给 <td> 或 <code><th> 写 <code>width: 100px 却没效果，最常见原因是表格还在默认的 table-layout: auto 模式。这种模式下，浏览器优先按内容宽度分配列宽，width 只是“参考建议”，内容一长就直接撑开。
- 哪怕你写了
style="width: 50px"，只要单元格里塞进一串无空格 URL（比如https://a.b/c/d/e/f/g/h/i/j/k/l/m/n/o/p/q/r/s/t/u/v/w/x/y/z），列宽照样被顶开 -
<col>在auto模式下也只起辅助作用，不能锁定列宽 - 想验证是否真被撑开？用开发者工具看 computed width —— 如果显示的值远大于你设的，说明内容赢了
table-layout: fixed 时 width 只认第一行或
切到 table-layout: fixed 后，列宽由第一行的 <th>/</th>
<td> 或 <code><col> 决定，后面所有行的 width 都会被忽略 —— 包括你手动加在第二行 <td> 上的样式。
<ul>
<li>如果第一行用了 <code>colspan，那一整行就只剩一个单元格，浏览器会把剩余列宽平均分，你后面写的 width 全作废
<col> 显式定义每列宽（<col style="width: 120px">），要么加一行隐藏的、不合并的 <tr> 放在最前面，里面每个 <code><td> 设好 <code>width
<col> 必须写在 <thead> 或 <code><tbody> 外面，紧贴 <code><table> 开始，否则无效
<h3>内容溢出导致视觉上“宽度失效”</h3>
<p>即使列宽锁住了，长文本不换行也会让 padding 被顶满、边框被覆盖，看起来像“宽度没生效”。这不是 width 失效，是内容跑出了可视区域。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img
src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a>
<p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p>
</div>
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>对英文/数字/URL 类无空格长串，必须配 <code>word-break: break-all；中英文混合推荐 overflow-wrap: break-word
white-space: nowrap 会彻底禁用换行，和 table-layout: fixed 一起用等于自毁box-sizing: border-box 到 <td>，避免 <code>padding 和 border 把实际宽度撑超
text-overflow: ellipsis + overflow: hidden + white-space: nowrap 组合（但需 display: block 或 inline-block）其他容易漏掉的干扰项
有些问题和表格机制无关，纯属 CSS 基础踩坑。
<td> 是 <code>display: table-cell，它不响应margin，所以别在<td> 上写 <code>margin想调位置- 父容器没设
width，width: 100%就算不出来 ——<table> 的百分比宽度永远依赖包含块 <li>行内样式被 CSS 文件里更具体的选择器覆盖（比如 <code>table td比td优先级高），用开发者工具看哪条被划掉了 - 某些 UI 框架（如 uni-app）会重置表格 display 行为，检查 computed styles 里
display是否还是table-cell
真正卡住人的地方，往往不是没写 width，而是没意识到表格布局分两层：一层管“列怎么分”，一层管“内容怎么放。两个环节都得控住，宽度才稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
