溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2021-08-07 17:08:30 來(lái)源：億速云 閱讀：273 作者：Leah 欄目：web開(kāi)發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)CSS中怎么實(shí)現(xiàn)表格斜線效果，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

首先創(chuàng)建一個(gè)結(jié)構(gòu)：

示例代碼

<divclassdivclass="out"> <b>類(lèi)別</b> <em>姓名</em> </div>

我們用<divclass="out">作為對(duì)角線的容器，我們來(lái)設(shè)置斜線樣式，關(guān)鍵代碼如下：

示例代碼

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

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

示例代碼

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;}

這樣一個(gè)斜線對(duì)角線就模擬出來(lái)了。

◆這種對(duì)角線模擬法也有缺點(diǎn)：

1.寬高度必須是已知的

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

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

完整的代碼如下：

示例代碼

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>用CSS實(shí)現(xiàn)網(wǎng)頁(yè)表格斜線-CSS在線</title> <styletypestyletype="text/css"> *{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;/*讓里面的兩個(gè)子容器絕對(duì)定位*/  }  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;}  </style> </head> <body> <table> <caption>用CSS實(shí)現(xiàn)網(wǎng)頁(yè)表格斜線-  <AhrefAhref='http://www.csscss.org'>CSS在線</A></caption> <tr> <thstylethstyle="width:80px;"> <divclassdivclass="out"> <b>類(lèi)別</b> <em>姓名</em> </div> </th> <th>年級(jí)</th> <th>班級(jí)</th> <th>成績(jī)</th> <th>班級(jí)均分</th> </tr> <tr> <tdclasstdclass="t1">張三</td> <td>三</td> <td>2</td> <td>62</td> <td>61</td> </tr> <tr> <tdclasstdclass="t1">李四</td> <td>三</td> <td>1</td> <td>48</td> <td>67</td> </tr> <tr> <tdclasstdclass="t1">王五</td> <td>三</td> <td>5</td> <td>79</td> <td>63</td> </tr> <tr> <tdclasstdclass="t1">趙六</td> <td>三</td> <td>4</td> <td>89</td> <td>66</td> </tr> </table> </body> </html>

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

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手