用div css模擬表格對(duì)角線

2024-07-11 08:44:36

字體：大中小

供稿：網(wǎng)友

這只是探討一種CSS模擬表格對(duì)角線的用法，實(shí)際在工作中可能覺得這樣做有點(diǎn)小題大作，這不是本主題討論的重點(diǎn)。如果對(duì)此深以為然的朋友，請(qǐng)一笑過之.
首先聲明：
這只是探討一種CSS模擬表格對(duì)角線的用法，實(shí)際在工作中可能覺得這樣做有點(diǎn)小題大作，這不是本主題討論的重點(diǎn)。如果對(duì)此深以為然的朋友，請(qǐng)一笑過之。。。
有時(shí)在插入文檔時(shí)，要用到表格對(duì)角線，常見的作法是用圖片的方式來處理，還有就是用vml來畫對(duì)角線，能不能用html css方式來實(shí)現(xiàn)呢？答案是肯定的，下面我們來摸擬一個(gè)表格對(duì)角線。
原理：
用邊框線來摸擬斜線，我們知道，如果將一個(gè)DIV的邊框線設(shè)置得足夠?qū)挷⒍x了不同的顏色時(shí)，其相鄰的兩條邊框線交界處就是斜線。知道了這個(gè)原理，我們就可以用border-left和border-top來模擬出斜線的效果。
我們先創(chuàng)建一個(gè)結(jié)構(gòu)：
<div class="out">
<b>類別</b>
<em>姓名</em>
</div>
我們用<div class="out">作為對(duì)角線的容器，我們來設(shè)置斜線樣式，關(guān)鍵代碼如下：
.out{
border-top:40px #D6D3D6 solid;/*上邊框?qū)挾鹊扔诒砀竦谝恍行懈?/
width:0px;/*讓容器寬度為0*/
height:0px;/*讓容器高度為0*/
border-left:80px #BDBABD solid;/*左邊框?qū)挾鹊扔诒砀竦谝恍械谝桓駥挾?/
position:relative;/*讓里面的兩個(gè)子容器絕對(duì)定位*/
}
<b>和<em>兩個(gè)標(biāo)簽來設(shè)置兩個(gè)分類，分別將它們?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ì)角線就模擬出來了。知道了原理，你可以變成很多有趣的東西出來，祝你好運(yùn)！
這種對(duì)角線模擬法也有缺點(diǎn)：

寬高度必須是已知的寬高的長(zhǎng)度不能差得太大，你可以試試將寬度拉得比高度長(zhǎng)好幾倍，看看效果。（給你們留點(diǎn)作業(yè)練習(xí)練習(xí)）還有就是斜線條不能設(shè)置顏色。
另：以上代碼只測(cè)試了ie6和ff3，其它瀏覽器未做測(cè)試，請(qǐng)朋友們測(cè)試一下。
下面是完整的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用div css模擬表格對(duì)角線</title> <style type="text/css"> *{padding:0;margin:0;} caption{font-size:14px;font-weight:bold;} table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;} th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;} th{background:#D6D3D6;} /*模擬對(duì)角線*/ .out{ border-top:40px #D6D3D6 solid;/*上邊框?qū)挾鹊扔诒砀竦谝恍行懈?/ width:0px;/*讓容器寬度為0*/ height:0px;/*讓容器高度為0*/ border-left:80px #BDBABD solid;/*左邊框?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>用div css模擬表格對(duì)角線</caption> <tr> <th style="width:80px;"> <div class="out"> <b>類別</b> <em>姓名</em> </div> </th> <th>年級(jí)</th> <th>班級(jí)</th> <th>成績(jī)</th> <th>班級(jí)均分</th> </tr> <tr> <td class="t1">張三</td> <td>三</td> <td>2</td> <td>62</td> <td>61</td> </tr> <tr> <td class="t1">李四</td> <td>三</td> <td>1</td> <td>48</td> <td>67</td> </tr> <tr> <td class="t1">王五</td> <td>三</td> <td>5</td> <td>79</td> <td>63</td> </tr> <tr> <td class="t1">趙六</td> <td>三</td> <td>4</td> <td>89</td> <td>66</td> </tr> </table> </body> </html>

提示：您可以先修改部分代碼再運(yùn)行

<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>用div+css模擬表格對(duì)角線</title> <style type="text/css"> * { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; border-left:1px solid #999; border-top:1px solid #999; font-size:13px; text-align:center; width:500px; margin:50px auto; } td,th { border-right:1px solid #999; border-bottom:1px solid #999; padding:5px 0; background:#ddd; } td { background:#F7F8F5; } .mytablbox { width:100px; } .mytable { width:0; height:0; margin:-5px 0; position:relative; border-top:50px solid #ddd; border-left:100px solid #F7F8F5; } .mytable strong { display:block;position:absolute;top:-40px;left:-40px;width:35px; font-style:normal; } .mytable em { position:absolute; left:-90px; top:-17px; display:block; width:30px; font-style:normal; } </style> </head> <body> <table> <tr> <th class="mytablbox"> <div class="mytable"> <strong>類別</strong> <em>姓名</em> </div> </th> <th>表格</th> <th>表格</th> </tr> <tr> <td>表格</td> <td>表格</td> <td>表格</td> </tr> <tr> <td>表格</td> <td>表格</td> <td>表格</td> </tr> <tr> <td>表格</td> <td>表格</td> <td>表格</td> </tr> </table> </body> </html>

提示：您可以先修改部分代碼再運(yùn)行

原理：利用border-top:50px solid #ddd; border-left:100px solid #F7F8F5;模擬出三角形；再用css定位固定文字的位置。

上一篇：CSS布局帶來的巨大影響:CSS display屬性值

下一篇：IE Firefox在css中的差別 (部分)