CSS table添加斜线

效果图：

结合css、svg之类的可以实现

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

其中下面斜线base64加密后的代码

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=

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

代码中的black是颜色，支持16进制颜色编码，修改颜色后，重新base64加密后替换原来的加密代码即可。
 
在想要加下斜线的td加入改class样式即可。

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

参考代码：

<th id="thk" >
    <div class="biaotou">
         <div class="biaotoutxt1">节次</div>
         <div class="biaotoutxt2">教室</div>
    </div> 
</th> 

.biaotou {
    line-height: 5px;
    text-align: left;
    /*  用背景图片 方式 有斜线 也是可以的
        background: rgba(0, 0, 0, 0) url("${base}/images/tab_bg.jpg") no-repeat scroll 0 0;
        height: 51px;
        width: 131px;*/
}

.biaotoutxt1 {
    color: #FFFFFF; /* 文字颜色  */
    padding: 0px 0 0 58px; /* 文字位置  需要手调  */
    font-weight: bold;
}

.biaotoutxt2 {
    color: #FFFFFF;
    padding: 10px 0 0 2px;
    font-weight: bold;
}
td[class=oblique_line]:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 164px; /* 需要手调 ，线的长度 */
    top: 171px; /* 需要手调 ，线的位置*/
    left: 57px;
    /*background-color: white;*/ /* 线的颜色 black */
    background-color: red; /* 线的颜色 black */
    display: block;
    transform: rotate(-74deg); /* 需要手调 ，斜线的角度*/
    transform-origin: top;
}
#thk {
    background: #146AA2 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center;
}

参考文献：

https://blog.csdn.net/qq_26695613/article/details/129862941

https://blog.csdn.net/gaoxiang19820514/article/details/106900850