一般我们的html表格表头需要绘制对角线展示横向、纵向表头的类型，普通的实现方法就是使用css绘制两个三角形，但是是在已知宽高的情况下，如果站在基础研发的角度肯定是不行的，那么我就临时抱佛脚看了一下用svg绘制一条线，并使用这个svg文件作为我的这个表格表头的背景图，没想到效果还是不错的。
下面贴出来html代码
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>表格表头 对角线</title> 8 <style type="text/css"> 9 body {TEXT-ALIGN: center;} 10 table th { 11 background-color: #2393df; 12 border: 1px solid #dddddd; 13 max-width: 150px; 14 min-width: 150px; 15 } 16 table thead tr:FIRST-CHILD th:FIRST-CHILD { 17 background-image: url(line.svg); 18 } 19 </style> 20 </head> 21 <body> 22 <table> 23 <thead> 24 <tr> 25 <th rowspan="2" style="position: relative;"> 26 <div class="clearfix" style="positin:absolute;top:5px;right:5px;"><font style="float:right;">横向表头</font></div> 27 <br> 28 <div style="positin:absolute;bottom:10px;left:10px;"><font style="float:left">纵向表头</font></div> 29 </th> 30 <th colspan="2">纵向表头1</th><th rowspan="2">纵向表头3</th></tr> 31 <tr><th>纵向表头1.1</th><th>纵向表头1.2</th></tr> 32 </thead> 33 <tbody> 34 <tr><th>横向表头1</th><td>1</td><td>2</td><td>3</td></tr> 35 <tr><th>横向表头2</th><td>1</td><td>2</td><td>3</td></tr> 36 <tr><th>横向表头3</th><td>1</td><td>2</td><td>3</td></tr> 37 <tr><th>横向表头4</th><td>1</td><td>2</td><td>3</td></tr> 38 <tr><th>横向表头5</th><td>1</td><td>2</td><td>3</td></tr> 39 <tr><th>横向表头6</th><td>1</td><td>2</td><td>3</td></tr> 40 <tr><th>横向表头7</th><td>1</td><td>2</td><td>3</td></tr> 41 </tbody> 42 </table> 43 </body> 44 </html>
svg文件的代码：
1 <?xml version="1.0" standalone="no"?> 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 4 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="white" stroke-width="1"/></svg>
最终的效果：
表头的html代码中有一个定位，这是为了在我表头分级的情况下能更好的表达，上级和下级类别不一样！