html原生不支持表头斜线，推荐用::before伪元素实现：给设position:relative和padding:0，再用绝对定位伪元素画1px宽线并rotate(-45deg)，transform-origin设为top left确保起点稳定；svg base64背景图适合固定尺寸场景，需注意/contain防失真；border模拟法兼容ie8但需手动调文字偏移。
HTML原生不支持表头斜线，但用 CSS 就能干净实现，关键不是“加一条线”，而是“让两个文字区域在视觉上被斜线分开”。
用 ::before 伪元素画斜线（推荐）
这是最可控、兼容性好（IE9+）、无需额外图片或 JS 的方案。核心是：给 <th> 加 <code>position: relative，再用绝对定位的伪元素画线。
-
<th class="oblique">现场情况</th>，对应 CSS 中.oblique { position: relative; padding: 0; } -
::before设为position: absolute，width: 1px，height设为略大于单元格高度（比如120px），background-color控制颜色 -
transform: rotate(-45deg)绕左上角旋转，transform-origin: top left确保起点稳定 - 通过
top和left微调起始位置，常见值是top: 8px; left: 8px（避开内边距干扰）
用 SVG Base64 背景图（适合固定尺寸）
适合批量生成、样式统一、且不需要动态调整角度的场景。本质是把 SVG 编码进 CSS，作为背景图平铺或居中。
- Base64 字符串里
<line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="1"></line>是关键路径，改stroke值就能换色 - 使用时直接写：
background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat center center / contain; - 注意
/ contain防止拉伸失真；如果单元格宽高不固定，慎用——SVG 不会自动缩放适配 - 修改颜色后必须重新 Base64 编码，不能只改字符串里的
black
用 border 模拟斜线（老项目兼容首选）
原理是画一个零宽高三角形（靠 border），再旋转 45°。优点是纯 CSS、无外部依赖、IE8 可用；缺点是文字排版需手动计算偏移。
- 结构：
<th> <div class="diag"></div> <span class="top">A</span><span class="bottom">B</span> </th> .diag { position: absolute; top: 0; left: 0; width: 0; height: 0; border-bottom: 50px solid #333; border-left: 50px solid transparent; transform: rotate(-45deg); }-
.top和.bottom用position: absolute分别定位到左上和右下区域，line-height和padding要配合 border 尺寸手调 - 容易踩坑：没设
th { position: relative; padding: 0; }，会导致子元素定位错乱
真正难的不是画那条线，而是让左右两段文字在不同屏幕、不同字号下始终对齐斜线两端。建议先定死单元格 width 和 height，再调伪元素位置；若需响应式，优先选 SVG 方案并搭配 background-size: cover 或媒体查询微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
