HTML表格实现斜线表头的排版方案-html教程-PHP中文网

html原生不支持斜线表头，需用css伪元素（如::before）结合position、border或transform模拟斜线，并配合绝对定位文字实现；兼容ie9–10需避免transform，改用固定像素border拼接；复杂场景推荐svg方案。

html表格实现斜线表头的排版方案

斜线表头在HTML中没有原生支持

HTML的 <table> 规范里没有“斜线单元格”这种东西，<code><th> 或 <code><td> 都只能是矩形。所谓“斜线表头”，本质是视觉模拟——靠CSS遮罩、伪元素画线，或用图片/Canvas覆盖实现。直接写 <code><th rowspan="2">姓名</th> 加斜杠字符（如 /）是无效的，文字会重叠、对不齐、响应式下全乱。

推荐用 `::before` 伪元素画斜线 + 文字定位

这是目前兼容性好、可维护性强的主流方案：用 position: relative 定位表头单元格，再用 ::before 绘制一条绝对定位的斜线，两行文字分别用 <div> 包裹并错开位置。 <ul> <li>斜线用 <code>border-left + border-bottom 拼成（45°），或更精确地用 transform: rotate(-45deg)

上行文字（如“项目”）设 top: 4px，下行文字（如“阶段”）设 bottom: 4px，避免和斜线打架

必须给 <th> 设置 <code>padding: 0，否则内边距会挤歪定位

注意 box-sizing: border-box，否则 Firefox 下 border 宽度可能影响计算

<th style="position: relative; padding: 0;">
  <div style="position: absolute; top: 4px; left: 8px;">项目</div>
  <div style="position: absolute; bottom: 4px; right: 8px;">阶段</div>
  <div style="position: absolute; width: 16px; height: 16px; 
      border-left: 1px solid #000; border-bottom: 1px solid #000; 
      transform: rotate(-45deg); top: 50%; left: 50%; 
      transform-origin: center;"></div>
</th>