<style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        caption{
            font-size:14px;
            font-weight
 
:bold;
        }
        table{
            border-collapse:collapse;
            border:1px #525152 solid;
            width:50%;
            margin:0 auto;
            margin-top:100px;
        }
        th,td{
            border:1px #525152 solid;
            text-align:center;
            font-size
 
:12px;
            line-height:30px;
            background-color:#C6C7C6;
        }
        th{
            background:#D6D3D6;
        }
        /*模擬對角線*/
        .diagonal{
           border-top:40px #D6D3D6 solid;/*上邊框寬度等於表格第一行行高*/
           width:0;/*讓容器寬度為0*/
           height:0;/*讓容器高度為0*/
           border-left
 
:80px #BDBABD solid;/*左邊框寬度等於表格第一行第一格寬度*/
           position:relative;/*讓裏面的兩個子容器絕對定位*/
        }
        .right-top{
            position:absolute;
            top:-40px;
            left:-40px;
            width:35px;}
        .left-bottom{
            position:absolute;
            top:-25px;
            left:-70px;
            width:55px;
        }
        .name{
            background-color:#BDBABD;
        }
    </style>
    <table>
      <caption>用div+css模擬表格對角線</caption>
      <tr>
        <th style="width:80px;">
            <div class="diagonal">
                <div class="right-top">類別</div>
                <div class="left-bottom">姓名</div>
            </div>
        </th>
        <th>年級</th>
        <th>班級</th>
        <th>成績</th>
        <th>班級均分</th>
      </tr>
      <tr>
        <td class="name">張三</td>
        <td>三</td>
        <td>2</td>
        <td>62</td>
        <td>61</td>
      </tr>
      <tr>
        <td class="name">李四</td>
        <td>三</td>
        <td>1</td>
        <td>48</td>
        <td>67</td>
      </tr>
      <tr>
        <td class="name">王五</td>
        <td>三</td>
        <td>5</td>
        <td>79</td>
        <td>63</td>
      </tr>
      <tr>
        <td class="name">趙六</td>
        <td>三</td>
        <td>4</td>
        <td>89</td>
        <td>66</td>
      </tr>
    </table>

html中給表格添加斜線