table表头,一个表格分2个名字

项目需要,需要将表格第一个显示2个属性
网上找了好多,搞不出来效果,记录一下,以后好用

image.png

    <table border="1"
                       style="width:100%;margin:0 auto">
                    <tr>
                        <th class="head">
                            <span class="right">月份</span>
                            <span class="left">类型</span>
                        </th>
                    </tr>
                    <tr>
                        <td style="width:100px">体能（分）</td>
                        <td style="width:60px"
                            v-for="(item, index) in form.sysUserYearExamineVo2List"
                            :key="'month'+index"> {{ item.comprehensivePhysicalResult|| 0  }}</td>
                    </tr>
                </table>

这个head类

.head{
    width: 100px; /*这里需要自己调整，根据自己的需求调整宽度*/
    height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
    position: relative;
    .right {
        position: absolute;
        right: 5px;
        top: 5px;
        color: #0a46a5;
        font-size: 15px;
    }
    .left {
        position: absolute;
        left: 5px;
        bottom: 5px;
        color: #000;
        font-size: 15px;
    }
}
th[class='head']:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 110px; /*这里需要自己调整，根据td的宽度和高度*/
    top: 0;
    left: 0;
    background-color: #3e658b;
    display: block;
    transform: rotate(-64deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: top;
}

若果需要适配页面,做个媒体查询

// 表格头部分划线适配
@media screen and (min-width: 1680px) and (max-width: 1920px) {
    th[class='head']:before {
        content: '';
        position: absolute;
        width: 1px;
        height: 150px; /*这里需要自己调整，根据td的宽度和高度*/
        top: 0;
        left: 0;
        background-color: #3e658b;
        display: block;
        transform: rotate(-71deg); /*这里需要自己调整，根据线的位置*/
        transform-origin: top;
    }
}