<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用div+css模拟表格对角线</title>
<style type="text/css">
* { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; border-left:1px solid #999; border-top:1px solid #999; font-size:13px; text-align:center; 500px; margin:50px auto; }
td,th { border-right:1px solid #999; border-bottom:1px solid #999; padding:5px 0; background:#ddd; }
td { background:#F7F8F5; }
.mytablbox { 100px; }
.mytable { 0; height:0; margin:-5px 0; position:relative; border-top:50px solid #ddd; border-left:100px solid #F7F8F5; }
.mytable strong { display:block;position:absolute;top:-40px;left:-40px;35px; font-style:normal; }
.mytable em { position:absolute; left:-90px; top:-17px; display:block; 30px; font-style:normal; }
</style>
</head>
<body>
<table>
<tr>
<th class="mytablbox">
<div class="mytable">
<strong>类别</strong>
<em>姓名</em>
</div>
</th>
<th>表格</th>
<th>表格</th>
</tr>
<tr>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
<tr>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
<tr>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
</table>
</body>
</html>
原理：利用border-top:50px solid #ddd; border-left:100px solid #F7F8F5;模拟出三角形；
再用css定位固定文字的位置。