背景:业务给了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>
完结。