CSS小技巧一：用div+css模拟表格对角线

<!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定位固定文字的位置。