調(diào)用DIV+CSS實(shí)現(xiàn)模擬表格對角線
本文和大家重點(diǎn)討論一下如何使用DIV+CSS模擬表格對角線，用邊框線來摸擬斜線，我們知道，如果將一個DIV的邊框線設(shè)置得足夠?qū)挷⒍x了不同的顏色時，其相鄰的兩條邊框線交界處就是斜線。
用DIV+CSS模擬表格對角線
有時在插入文檔時，要用到表格對角線，常見的作法是用圖片的方式來處理，還有就是用vml來畫對角線，能不能用html+css方式來實(shí)現(xiàn)呢？答案是肯定的，下面我們來摸擬一個表格對角線。
原理：
用邊框線來摸擬斜線，我們知道，如果將一個DIV的邊框線設(shè)置得足夠?qū)挷⒍x了不同的顏色時，其相鄰的兩條邊框線交界處就是斜線。知道了這個原理，我們就可以用border-left和border-top來模擬出斜線的效果。
我們先創(chuàng)建一個結(jié)構(gòu)：
- <divclassdivclass="out">
- <b>類別</b>
- <em>姓名</em>
- </div>
我們用<divclass="out">作為對角線的容器，我們來設(shè)置斜線樣式，關(guān)鍵代碼如下：
- .out{
- border-top:40px#D6D3D6solid;/*上邊框?qū)挾鹊扔诒砀?**行行高*/
- width:0px;/*讓容器寬度為0*/
- height:0px;/*讓容器高度為0*/
- border-left:80px#BDBABDsolid;/*左邊框?qū)挾鹊扔诒砀?**行***格寬度*/
- position:relative;/*讓里面的兩個子容器絕對定位*/
- }
<b>和<em>兩個標(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;}
這樣一個斜線對角線就模擬出來了。知道了原理，你可以變成很多有趣的東西出來，祝你好運(yùn)！
這種對角線模擬法也有缺點(diǎn)：
◆寬高度必須是已知的
◆寬高的長度不能差得太大，你可以試試將寬度拉得比高度長好幾倍，看看效果。
◆還有就是斜線條不能設(shè)置顏色。
另：以上代碼只測試了IE6和ff3，其它瀏覽器未做測試，請朋友們測試一下。#p#
完整的代碼：
- <!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;/*上邊框?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;}
- </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滾動條屬性及樣式設(shè)置方式
- JavaScript動態(tài)創(chuàng)建div屬性和樣式
- SPAN元素和DIV元素的區(qū)別
- CSS2.0中page-break-after屬性用法
- 探究CSS中border:none;與border:0;的區(qū)別
