html表格中加入斜线,使用css给table表格表头添加斜线(斜线表格)

背景：业务给了90+张word电子表格，需要用html设计出来。

如图所示，红色区域的下斜线如何实现？

先说结论：html中table没有直接的斜线表头标签，但结合css、svg之类的可以实现。

.class{

background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center;
}

其中

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=

是base64加密后的代码，解密后如下：

代码中的black是颜色，支持16进制颜色编码，修改颜色后，重新base64加密后替换原来的加密代码即可。

在想要加下斜线的td加入改class样式即可。

第二种，利用div+transform翻转实现

 <tr>
                <td colspan='2'>现场情况</td>
                <td style="positon:relative;">
                    <span style="display: block;text-align: left;transform: rotate(-14deg)">更换时间</span> 
                    <div style="transform: rotate(-17deg);width: 100%;height: 1px;background: #000;position: absolute;top: 50%;left: 0px;"></div> 
                    <span style="display: block;text-align: right;">
                        <el-form-item label="" prop="p_rc_40"><input v-model="ruleForm.p_rc_40"  type="text" id="UpdateTime" style="height: 30px;transform: rotate(-17deg);
    width: 40%;"></el-form-item>
                    </span>
                </td>
                <td style="positon:relative;">
                    <span style="display: block;text-align: left;transform: rotate(-14deg)">闪光灯发数</span> 
                    <div style="transform: rotate(-17deg);width: 100%;height: 1px;background: #000;position: absolute;top: 50%;left: 0px;"></div> 
                    <span style="display: block;text-align: right;">
                        <el-form-item label="" prop="p_rc_40"><input v-model="ruleForm.p_rc_41"  type="text" id="UpdateTime" style="height: 30px;transform: rotate(-17deg);
    width: 40%;"></el-form-item>
                    </span>
                </td>
                <td style="positon:relative;">
                    <span style="display: block;text-align: left;transform: rotate(-14deg)">污染程度</span> 
                    <div style="transform: rotate(-17deg);width: 100%;height: 1px;background: #000;position: absolute;top: 50%;left: 0px;"></div> 
                    <span style="display: block;text-align: right;">
                        <el-form-item label="" prop="p_rc_40"><input v-model="ruleForm.p_rc_42"  type="text" id="UpdateTime" style="height: 30px;transform: rotate(-17deg);
    width: 40%;"></el-form-item>
                    </span>
                </td>
            </tr>

 

完结。