text-indent 在 <td> 和 <th> 中常失效，因其默认 display: table-cell，需内容换行才能生成首行盒；更稳妥方案是用 padding-left 或包裹 <div> 实现缩进。
text-indent 在 <td> 和 <th> 中为什么经常失效？
text-indent 理论上对块级元素生效，而 <td> 和 <th> 默认是 display: table-cell——它属于“块级盒”但有特殊格式化规则。问题常出在：
- 表格单元格默认
white-space: normal，但若内容是单行且未换行，浏览器可能不生成明确的“首行盒”，导致缩进不可见 - 单元格内文本前有空格、
<span>），text-indent仍会作用，但视觉上被掩盖 - 表格设置了
border-collapse: collapse或font-size: 0等干扰样式，间接影响行盒生成
验证方法：用开发者工具检查目标 <td> 的 Computed → display 是否为 table-cell，再看 text-indent 是否被计算为期望值。
在表格单元格中真正有效的缩进写法
text-indent 能用，但必须满足两个前提：内容足够长以触发换行，且单元格行为未被 flex/grid 覆盖。更稳妥的做法是绕过“首行”语义，直接控制内容位置：
- 对
<td>或<th>直接加padding-left: 2em：不依赖行盒，兼容所有表格模式，视觉效果一致 - 若需保留首行缩进语义（例如导出 PDF 时需匹配印刷规范），可包裹一层
<div>：<td><div style="text-indent: 2em;">内容</div></td> - 避免对整个
<table>设text-indent：它会继承到所有后代，包括<th>，容易误缩进表头
单位推荐 2em，而非 32px 或 2%：表格列宽动态变化时，% 缩进会随列宽剧烈浮动；px 在高DPI屏或系统字体放大下易失准。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
遇到 text-indent 不生效的三个典型场景
-
<td> 里只有一小段短文本（如 “是”、“否”、“123”），没换行 → 浏览器认为“整段即首行”，但缩进像素被内容宽度吞没，实际生效却看不见
- 单元格设置了
text-align: center 或 text-align: right → text-indent 依然计算，但居中/右对齐覆盖了缩进偏移，结果是“缩了又拉回”
- 使用了 CSS-in-JS 库（如 Emotion）或富文本编辑器输出的表格 → 内联样式中存在高权重的
text-indent: 0 !important，直接覆盖你的规则
<td> 里只有一小段短文本（如 “是”、“否”、“123”），没换行 → 浏览器认为“整段即首行”，但缩进像素被内容宽度吞没，实际生效却看不见 text-align: center 或 text-align: right → text-indent 依然计算，但居中/右对齐覆盖了缩进偏移，结果是“缩了又拉回” text-indent: 0 !important，直接覆盖你的规则 调试建议：临时加 background: #ff0 到 <td>，观察文字是否真的向右偏移；若背景框内文字居左顶边，说明 text-indent 没触发，该换 padding-left。
表格缩进要不要考虑打印样式和屏幕阅读器？
要。但不是通过 text-indent 解决：
- 打印样式中，
text-indent行为与屏幕基本一致，但部分 PDF 导出工具（如 wkhtmltopdf）对table-cell的缩进支持不稳定，实测发现padding-left更可靠 - 屏幕阅读器不感知缩进，无论用
text-indent还是padding-left，都不会影响语义；真正影响可访问性的是：别用全角空格或 - 如果表格用于数据展示（如后台管理列表），缩进反而干扰信息密度；只有带描述性文本的单元格（如备注列）才需要视觉分层，此时优先用
padding-left+ 统一字体大小，比text-indent更可控
复杂点在于：表格布局本身就在对抗常规文档流，硬套段落排版逻辑容易翻车。多数时候，你真正在意的不是“首行缩进”，而是“让这列文字别贴着左边框太死”——那就老老实实用 padding-left。
