HTML、CSS表格的斜表头设置

先看效果：


一、先准备一个普通的表格
​如果觉得麻烦也可以通过这个链接https://tabletag.net/，快速生成表格样式，直接复制代码即可

<table>
        <caption>表格的斜表头设置</caption>
        <tr>
            <th style="width:80px;">
                <div class="oline"> <span class="span1">类别</span> <span class="span2">姓名</span> </div>
            </th>
            <th>年级</th>
            <th>班级</th>
            <th>年级排名</th>
            <th>平均分</th>
        </tr>
        <tr>
            <td class="t1">小明</td>
            <td>五</td>
            <td>1</td>
            <td>18</td>
            <td>97</td>
        </tr>
        <tr>
            <td class="t1">小红</td>
            <td>五</td>
            <td>2</td>
            <td>23</td>
            <td>96</td>
        </tr>
        <tr>
            <td class="t1">小刚</td>
            <td>五</td>
            <td>3</td>
            <td>66</td>
            <td>95</td>
        </tr>
    </table>

​二、给第一个格子加两个span元素

<tr>
  <th style="width:80px;">
      <div class="oline"> <span class="span1">类别</span> <span class="span2">姓名</span> </div>
  </th>
  <th>年级</th>
  <th>班级</th>
  <th>年级排名</th>
  <th>平均分</th>
</tr>

然后给oline这个类加样式即可

 /*模拟对角线*/
        .oline {
            border-top: 40px #fff solid;
            /*上边框宽度等于表格第一行行高*/
            width: 0px;
            /*让容器宽度为0*/
            height: 0px;
            /*让容器高度为0*/
            border-left: 80px #ccc solid;
            /*左边框宽度等于表格第一行第一格宽度*/
            position: relative;
            /*让里面的两个子容器绝对定位*/
            
        }

但是这种相当于是用背景色做的斜线效果，如果不喜欢的话，还可以用svg的形式

* {
            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;
        }

        /* 模拟对角线 */
        .oline {
            border-top: 40px #fff solid;
            /*上边框宽度等于表格第一行行高*/
            width: 0px;
            /*让容器宽度为0*/
            height: 0px;
            /*让容器高度为0*/
            border-left: 80px #fff solid;
            /*左边框宽度等于表格第一行第一格宽度*/
            position: relative;
            /*让里面的两个子容器绝对定位*/
            
        }
        .oline::before {
            position: absolute;
            top: -40px;
            left: -80px;
            width: 80px;
            height: 40px;
            background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center;
            content: '';
        }

        .span1 {
            font-style: normal;
            display: block;
            position: absolute;
            top: -40px;
            left: -40px;
            width: 35px;
        }

        .span2 {
            font-style: normal;
            display: block;
            position: absolute;
            top: -25px;
            left: -70px;
            width: 55x;
        }

其中（‘PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=’）是base64加密后的代码，解密后是：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="1"/></svg>

这里面的stroke是可以设置颜色，支持16进制颜色编码，修改颜色后，重新base64加密替换原来的加密代码即可。

JavaScript原生转换方法：

atob()：解码一个Base64字符串;
btoa()：从一个字符串或者二进制数据编码一个Base64字符串;

更换方式：

比如我想把颜色stroke=“black” 更换成 stroke=“#F2F2F2”，重新编码的结果填入即可

var str = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="#F2F2F2" stroke-width="1"/></svg>'; // 要进行Base64编码的字符串
  var encodedStr = btoa(str); // Base64编码后的结果
  console.log(encodedStr)