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

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

html表格中加入斜线,使用css给table表格表头单元格添加斜线_第1张图片

 

如图所示,红色区域的下斜线如何实现?

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

 

#lineTd{

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

}

或者直接写在单元格style中:

其中:

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=

是base64加密后的代码,解密后如下:

代码中的black是颜色,支持16进制颜色编码,修改颜色后,重新base64加密后替换原来的加密代码即可。修改完成可以来这里加解密: Base64 在线编码解码 | Base64 加密解密 - Base64.us

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

项目 日期 2010-10-15
采购 9000元

 

你可能感兴趣的:(html,css,前端)