溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么用DIV+CSS實現模擬表格對角線”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用DIV+CSS實現模擬表格對角線”吧!
用DIV+CSS模擬表格對角線
有時在插入文檔時，要用到表格對角線，常見的作法是用圖片的方式來處理，還有就是用vml來畫對角線，能不能用html+css方式來實現呢？答案是肯定的，下面我們來摸擬一個表格對角線。
原理：
用邊框線來摸擬斜線，我們知道，如果將一個DIV的邊框線設置得足夠寬并定義了不同的顏色時，其相鄰的兩條邊框線交界處就是斜線。知道了這個原理，我們就可以用border-left和border-top來模擬出斜線的效果。
我們先創建一個結構：
<divclassdivclass="out"> <b>類別</b> <em>姓名</em> </div>
我們用<divclass="out">作為對角線的容器，我們來設置斜線樣式，關鍵代碼如下：
.out{ border-top:40px#D6D3D6solid;/*上邊框寬度等于表格***行行高*/ width:0px;/*讓容器寬度為0*/ height:0px;/*讓容器高度為0*/ border-left:80px#BDBABDsolid;/*左邊框寬度等于表格***行***格寬度*/ position:relative;/*讓里面的兩個子容器絕對定位*/ }<b>和<em>兩個標簽來設置兩個分類，分別將它們設置為塊狀結構display:block;清除其默認的字體樣式font-style:normal；因其父容器設置了相對定位，所以設置其為絕對定位，這樣可以將它偏移到你想指定的位置了。
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;}這樣一個斜線對角線就模擬出來了。知道了原理，你可以變成很多有趣的東西出來，祝你好運！
這種對角線模擬法也有缺點：
◆寬高度必須是已知的
◆寬高的長度不能差得太大，你可以試試將寬度拉得比高度長好幾倍，看看效果。
◆還有就是斜線條不能設置顏色。
另：以上代碼只測試了IE6和ff3，其它瀏覽器未做測試，請朋友們測試一下。
完整的代碼：
<!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>用div+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;/*上邊框寬度等于表格***行行高*/ width:0px;/*讓容器寬度為0*/ height:0px;/*讓容器高度為0*/ border-left:80px#BDBABDsolid;/*左邊框寬度等于表格***行***格寬度*/ 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;} </style> </head> <body> <table> <caption>用div+css模擬表格對角線</caption> <tr> <thstylethstyle="width:80px;"> <divclassdivclass="out"> <b>類別</b> <em>姓名</em> </div> </th> <th>年級</th> <th>班級</th> <th>成績</th> <th>班級均分</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>到此，相信大家對“怎么用DIV+CSS實現模擬表格對角線”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
