如何设置HTML表格首列固定宽度-html教程-PHP中文网

td:first-child { width: 120px } 不生效，是因为 table 默认使用 table-layout: auto，浏览器优先按内容计算列宽，该选择器仅设置单元格建议宽度，不改变列级布局基准；真正锁定首列像素宽度必须用，且需配合 table-layout: fixed 和显式 table 宽度。

如何设置html表格首列固定宽度

为什么直接写 `td:first-child { width: 120px }` 不生效？

浏览器默认用 table-layout: auto，它先按内容算列宽，再缩放整张表。你给第一行某个 td 设宽度，只影响那一格的“建议宽度”，后续行照样被长文本撑开；更糟的是，td:first-child 选择器在 auto 模式下根本不会强制约束列宽——它只是给单元格盒模型设宽，不改变列级布局基准。

table 没设 width（比如 width: 100% 或 width: 800px），table-layout: fixed 就没参照系
<col> 没写，或写在 <thead> 里面（必须是 <code><table> 的直接子元素，且在 <code><thead> 前） <li>用了废弃的 <code><col width="120">，现代浏览器忽略，得用 <col style="width: 120px">

`col` 是唯一能真正锁定首列像素宽度的方式

<col> 是语义上专为列级控制设计的元素，优先级高于任何单元格上的 width 或 CSS width 声明，且不依赖渲染顺序。要固定首列，必须用它，并确保结构正确：

<colgroup></colgroup> 必须紧贴 <table> 开始后、<code><thead> 前 <li>第一个 <code><col> 对应首列，写 <col style="width: 120px">
后续 <col> 可留空（均分剩余空间）或设具体值，数量必须和实际列数一致
所有 <col> 宽度加起来超过 table 总宽？浏览器会等比缩小，不会留白也不会截断

示例最小可行结构：

ID	名称	状态
1	商品A	上架

首列固定后，长文本仍溢出怎么办？

table-layout: fixed 锁住了列宽，但不处理单元格内文本行为。如果内容是一长串无空格字符串（比如 URL、base64 片段），它会直接突破边界，导致横向滚动或撑破布局。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

给 td 和 th 加 white-space: nowrap + overflow: hidden + text-overflow: ellipsis
若需换行，改用 word-break: break-all 或 overflow-wrap: break-word（注意：后者对无空格长串支持有限）
别漏掉 th —— 表头也得统一控制，否则首行表头和下面数据列视觉错位