HTML原生不支持斜线表头，需用CSS伪元素（如::before）结合position、border或transform模拟斜线，并配合绝对定位文字实现；兼容IE9–10需避免transform，改用固定像素border拼接；复杂场景推荐SVG方案。
斜线表头在HTML中没有原生支持
HTML的 <table> 规范里没有“斜线单元格”这种东西，<th> 或 <td> 都只能是矩形。所谓“斜线表头”，本质是视觉模拟——靠CSS遮罩、伪元素画线，或用图片/Canvas覆盖实现。直接写 <th rowspan="2">姓名</th> 加斜杠字符（如 /）是无效的，文字会重叠、对不齐、响应式下全乱。
推荐用 ::before 伪元素画斜线 + 文字定位
这是目前兼容性好、可维护性强的主流方案：用 position: relative 定位表头单元格，再用 ::before 绘制一条绝对定位的斜线，两行文字分别用 <div> 包裹并错开位置。
- 斜线用
border-left+border-bottom拼成（45°），或更精确地用transform: rotate(-45deg) - 上行文字（如“项目”）设
top: 4px，下行文字（如“阶段”）设bottom: 4px，避免和斜线打架 - 必须给
<th>设置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>
IE9+ 兼容需避开 transform 和 Flex
如果还要支持 IE9–10，transform 可能失效，得换回传统 border 拼法，且不能依赖 top: 50% + transform: translate() 居中。这时候斜线 div 的尺寸和位置得用固定像素硬调。
- 把斜线容器设为
width: 12px; height: 12px，top: 8px; left: 8px - 去掉所有
transform，用border-left+border-bottom拼出近似 45° 线段 - 文字
<div>的position: absolute值全部用 px 单位，避免百分比计算误差 - IE 下
th默认有vertical-align: middle，但伪元素不受影响，需额外加line-height对齐
复杂表头建议改用 SVG 替代
当斜线不止一条（比如三线分隔）、文字带旋转、或要适配高缩放（如打印PDF）、或者需要动态生成时，纯 CSS 方案很快失控。SVG 是更可靠的选择：路径精准、缩放无损、语义清晰。
立即学习“前端免费学习笔记（深入）”；
- 把整个表头单元格设为
position: relative，内部放一个<svg width="100%" height="100%"> - 用
<line x1="0" y1="0" x2="100" y2="100">画斜线，坐标按单元格实际宽高算 - 文字用
<text x="10" y="20">定位，支持transform="rotate(-30)"微调角度 - 注意 SVG 中的单位默认是 px，不要混用 em 或 rem，否则在不同缩放下偏移会漂移
斜线表头真正难的不是“怎么画出来”，而是“怎么让上下文文字始终对齐、不随字体大小/行高/缩放抖动”。多数翻车都发生在换字体、加 font-size、或嵌套在 flex 容器里之后——这时候得回头检查所有绝对定位的基准是不是还牢靠。
