html css 设置表格单元格横线

html代码

       <table class="table">
        <thead>
            <tr>
                 <th width="20%" class="line">
                    <span>质控参数</span>
		    <span>样本</span>
                </th>
                <th>样本</th>
                <th>标准</th>
                <th>对照</th>
                <th>对照</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>XX</td>
                <td></td>
                <td>≥20%</td>
                <td>不适用</td>
                <td>不适用</td>
            </tr>
            
        </tbody>
    </table>

CSS代码

 /*模拟对角线*/
.line {
 background: #234390 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center;
}

.line span:first-child{
    display: inline-block;
    position: relative;
    bottom: -12px;
    left:-10px;
}

.line span:last-child{
    display: inline-block;
    position: relative;
    top:-10px;
    right: -10px;
}

说明

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>
代码中的black是颜色，支持16进制颜色编码，修改颜色后，重新base64加密后替换原来的加密代码即可。