text-indent 在 和 中常失效，因其默认 display: table-cell，需内容换行才能生成首行盒；更稳妥方案是用 padding-left 或包裹 实现缩进。

text-indent 在 <td> 和 <code><th> 中为什么经常失效？<p><code>text-indent 理论上对块级元素生效，而 <td> 和 <code><th> 默认是 <code>display: table-cell——它属于“块级盒”但有特殊格式化规则。问题常出在：

• 表格单元格默认 white-space: normal，但若内容是单行且未换行，浏览器可能不生成明确的“首行盒”，导致缩进不可见
• 单元格内文本前有空格、  或内联元素（如 <span></span>），text-indent 仍会作用，但视觉上被掩盖
• 表格设置了 border-collapse: collapse 或 font-size: 0 等干扰样式，间接影响行盒生成

验证方法：用开发者工具检查目标 <td> 的 Computed → <code>display 是否为 table-cell，再看 text-indent 是否被计算为期望值。

在表格单元格中真正有效的缩进写法

text-indent 能用，但必须满足两个前提：内容足够长以触发换行，且单元格行为未被 flex/grid 覆盖。更稳妥的做法是绕过“首行”语义，直接控制内容位置：

• 对 <td> 或 <code><th> 直接加 <code>padding-left: 2em：不依赖行盒，兼容所有表格模式，视觉效果一致
• 若需保留首行缩进语义（例如导出 PDF 时需匹配印刷规范），可包裹一层 <div>：<code><td><div style="text-indent: 2em;">内容</div></td>
• 避免对整个 <table> 设 <code>text-indent：它会继承到所有后代，包括 <th>，容易误缩进表头 <p>单位推荐 <code>2em，而非 32px 或 2%：表格列宽动态变化时，% 缩进会随列宽剧烈浮动；px 在高DPI屏或系统字体放大下易失准。
  

  HTML汇报生成器

  🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

  下载

  遇到 text-indent 不生效的三个典型场景

  • <td> 里只有一小段短文本（如 “是”、“否”、“123”），没换行 → 浏览器认为“整段即首行”，但缩进像素被内容宽度吞没，实际生效却看不见 <li>单元格设置了 <code>text-align: center 或 text-align: right → text-indent 依然计算，但居中/右对齐覆盖了缩进偏移，结果是“缩了又拉回”
  • 使用了 CSS-in-JS 库（如 Emotion）或富文本编辑器输出的表格 → 内联样式中存在高权重的 text-indent: 0 !important，直接覆盖你的规则

  调试建议：临时加 background: #ff0 到 <td>，观察文字是否真的向右偏移；若背景框内文字居左顶边，说明 <code>text-indent 没触发，该换 padding-left。

  表格缩进要不要考虑打印样式和屏幕阅读器？

  要。但不是通过 text-indent 解决：

  • 打印样式中，text-indent 行为与屏幕基本一致，但部分 PDF 导出工具（如 wkhtmltopdf）对 table-cell 的缩进支持不稳定，实测发现 padding-left 更可靠
  • 屏幕阅读器不感知缩进，无论用 text-indent 还是 padding-left，都不会影响语义；真正影响可访问性的是：别用全角空格或   “模拟”缩进，那会把无意义字符读出来
  • 如果表格用于数据展示（如后台管理列表），缩进反而干扰信息密度；只有带描述性文本的单元格（如备注列）才需要视觉分层，此时优先用 padding-left + 统一字体大小，比 text-indent 更可控

  复杂点在于：表格布局本身就在对抗常规文档流，硬套段落排版逻辑容易翻车。多数时候，你真正在意的不是“首行缩进”，而是“让这列文字别贴着左边框太死”——那就老老实实用 padding-left。