真正稳定的做法是用 colspan 合并标题行、空单元格占位实现缩进，配合 scope/headers 保障无障碍，white-space: pre 保 Excel 缩进，table-layout: fixed 确保响应式对齐。

用 colspan 和空单元格模拟层级缩进，别用 padding-left

资产负债表的“货币资金”“应收账款”这类一级科目下常套二级（如“库存现金”“银行存款”），再往下还有明细。直接用 CSS 的 padding-left 做缩进看似简单，但会导致列对齐错乱、导出 Excel 时结构丢失、打印时缩进塌陷。真正稳定的做法是靠 HTML 表格自身的结构控制：用 colspan 合并标题行，用空   单元格占位实现视觉缩进。

实操要点：

• 为每级科目预留一列专门用于缩进（例如第1列为缩进列，第2列为科目名，第3–4列为期初/期末数）
• 一级科目在缩进列留空，二级填一个  ，三级填两个  ，依此类推
• 合计行用 colspan="2" 覆盖缩进列+科目列，再接数值列，避免跨列错位
• 所有 <td> 必须严格按列数对齐，少一个单元格就会整行错位<h3>用 <code>scope 和 headers 保证屏幕阅读器可读性

  财务报表常被审计或监管系统自动解析，也需无障碍支持。单纯靠缩进视觉区分层级，对读屏软件无效。必须显式标注单元格归属关系。

  关键做法：

  立即学习“前端免费学习笔记（深入）”；

  

  html-to-pptx

  将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

  下载
  • 为每一级科目 <th> 设置 <code>scope="row"，并赋予唯一 id（如 id="asset-cash"）
  • 对应的数据单元格（如货币资金期末数）用 headers="asset-cash" 显式关联
  • 避免用 rowspan 跨多行合并科目名——它会切断 headers 的映射链
  • 测试方式：用 Chrome 开发者工具 → 辅助功能面板，检查数据单元格是否能正确读出所属科目

  导出 Excel 时缩进列变空白？用 white-space: pre 锁定空格

  很多后端导出库（如 SheetJS、Apache POI）或浏览器“另存为 Excel”会把纯空格或   当作无意义内容清掉，导致缩进消失。这不是 HTML 写错了，是渲染上下文切换导致的空白处理差异。

  解决方案：

  • 给缩进列的 <td> 加内联样式：<code>style="white-space: pre;"
  • 用真实空格替代  （即敲击空格键输入，而非 HTML 实体），配合 white-space: pre 可被 Excel 保留
  • 若用 JS 导出，SheetJS 中对缩进单元格设 {v: ' ', t: 's'}，t: 's' 强制字符串类型，防止自动转空
  • 切忌用 text-indent 或 margin-left —— Excel 完全不识别这些 CSS

  响应式下层级错乱？用 table-layout: fixed + 显式 width

  小屏设备上，表格列宽随内容撑开，缩进列可能被压缩到看不见，或数值列换行导致对齐崩坏。这不是媒体查询能解决的，根源在于表格默认的自动布局算法。

  必须加的 CSS：

  • table { table-layout: fixed; width: 100%; }
  • 为每列设明确宽度：col:nth-child(1) { width: 2em; } /* 缩进列 */，col:nth-child(2) { width: 25%; }，数值列用 width: 12% 等固定值
  • 缩进列内文字用 font-family: monospace;，确保每个空格等宽，缩进精度可控
  • 禁用 word-break: break-all —— 它会让科目名在任意位置断行，破坏层级视觉流

  层级缩进本质是结构问题，不是样式问题。缩进列的宽度、空格数量、colspan 范围，三者必须同步计算——差一个像素或一个空格，整张表的可信度就垮了。