具体代码实现如下:
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>带表头斜线的表格</title><style>* {margin: 0;padding: 0;}table {border: 1px solid #fff;/*去掉表格之间的空隙*/border-collapse:collapse;margin: 100px auto;}caption {font-size: 20px;font-weight: bold;}th,td{border: 1px solid #ccc;width: 80px;font-size: 14px;line-height: 40px;text-align: center;}/*模拟对角线*/.out{border-top:40px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/width:0px;/*让容器宽度为0*/height:0px;/*让容器高度为0*/border-left:80px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/position:relative;/*让里面的两个子容器绝对定位*/}b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:50px;}em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55px;}</style></head><body><table><caption>我是标题</caption><thead><tr><!-- 模拟表头分割线的部分 --><th><div class="out"><b>类别</b><em>姓名</em></div></th><th>年龄</th><th>班级</th></tr></thead><tbody><tr><td>张三</td><td>18</td><td>大一</td></tr><tr><td>李四</td><td>19</td><td>大二</td></tr><tr><td>王五</td><td>20</td><td>大三</td></tr><tr><td>赵六</td><td>21</td><td>大四</td></tr></tbody></table></body></html>
结果:
