背景:业务给了90+张word电子表格,需要用html设计出来。
如图所示,红色区域的下斜线如何实现?
先说结论: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:html文件怎么编辑
css:css样式表的三种样式
前端:前端框架
本文由 用户 于 2024-06-10 发布在 金钥匙,如有疑问,请联系我们。
本文链接:https://www.51969.com/post/18713080.html
发表评论