CSS中怎么實現(xiàn)表格斜線效果

 類別 姓名 

我們用作為對角線的容器，我們來設(shè)置斜線樣式，關(guān)鍵代碼如下：

示例代碼

.out  {  border-top:40px#D6D3D6solid;/*上邊框?qū)挾鹊扔诒砀?**行行高*/  width:0px;/*讓容器寬度為0*/  height:0px;/*讓容器高度為0*/  border-left:80px#BDBABDsolid;/*左邊框?qū)挾鹊扔诒砀?**行***格寬度*/  position:relative;/*讓里面的兩個子容器絕對定位*/  }

和兩個標(biāo)簽來設(shè)置兩個分類，分別將它們設(shè)置為塊狀結(jié)構(gòu)display:block;清除其默認(rèn)的字體樣式font-style:normal；因其父容器設(shè)置了相對定位，所以設(shè)置其為絕對定位，這樣可以將它偏移到你想指定的位置了。

示例代碼

b{font-style:normal;display:block;  position:absolute;top:-40px;  left:-40px;width:35px;}  em{font-style:normal;display:block;  position:absolute;top:-25px;left:-70px;width:55x;}

這樣一個斜線對角線就模擬出來了。

◆這種對角線模擬法也有缺點：

1.寬高度必須是已知的

2.寬高的長度不能差得太大，你可以試試將寬度拉得比高度長好幾倍，看看效果。

3.還有就是斜線條不能設(shè)置顏色。

完整的代碼如下：

示例代碼

      *{padding:0;margin:0;}  caption{font-size:14px;font-weight:bold;}  table{border-collapse:collapse;border:1px#525152solid;  width:50%;margin:0auto;margin-top:100px;}  th,td{border:1px#525152solid;text-align:center;  font-size:12px;line-height:30px;background:#C6C7C6;}  th{background:#D6D3D6;}  /*表格斜線*/  .out{  border-top:40px#D6D3D6solid;/*上邊框?qū)挾鹊扔诒砀?**行行高*/  width:0px;/*讓容器寬度為0*/  height:0px;/*讓容器高度為0*/  border-left:80px#BDBABDsolid;/*左邊框?qū)挾鹊扔诒砀?**行***格寬度*/  position:relative;/*讓里面的兩個子容器絕對定位*/  }  b{font-style:normal;display:block;position:absolute;  top:-40px;left:-40px;width:35px;}  em{font-style:normal;display:block;position:absolute;  top:-25px;left:-70px;width:55x;}  .t1{background:#BDBABD;}          類別 姓名         張三       李四       王五       趙六      
用CSS實現(xiàn)網(wǎng)頁表格斜線-  CSS在線
年級
班級
成績
班級均分
三
2
62
61
三
1
48
67
三
5
79
63
三
4
89
66
  

上述就是小編為大家分享的CSS中怎么實現(xiàn)表格斜線效果了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。