效果圖

在HtmlTable表格中畫斜線 分 文字和斜線 兩部分實現

文字部分

<th class="row-0" >
    <div class="biaotou">
         <div class="biaotoutxt1">轉單辦事處</div>
         <div class="biaotoutxt2">接單辦事處</div>
    </div> 
</th> 

<style>
    .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;
         131px;*/
    }
    .biaotoutxt1 {
        color: #FFFFFF;  /* 文字顏色  */
        padding: 1px 0 0 65px; /* 文字位置  需要手調  */
    }
    .biaotoutxt2 {
        color: #FFFFFF;
        padding: 15px 0 0 5px;
    }
</style>

斜線部分

此table可以放在html的最下方，僅用于畫斜線

<table><td class="first"></td></table>

<style>
     td[class=oblique_line]:before{
        content: "";
        position: absolute;
        width: 1px;
        height:164px;/* 需要手調 ，線的長度 */
        top:171; /* 需要手調 ，線的位置*/
        left:57;
        background-color: white; /* 線的顏色 black */
        display: block;
        transform: rotate(-74deg);/* 需要手調 ，斜線的角度*/
        transform-origin: top;
    }
</style>

總結

以上是生活随笔為你收集整理的Html Table 表格 画斜线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。