用div+css類比表格對角線
本站原創：biny 轉載請註明出處
首先聲明：這隻是探討一種CSS類比表格對角線的用法，實際在工作中可能覺得這樣做有點小題大作，這不是本主題討論的重點。如果對此深以為然的朋友，請一笑過之。。。
有時在插入文檔時，要用到表格對角線，常見的作法是用圖片的方式來處理，還有就是用vml來畫對角線，能不能用html+css方式來實現呢？答案是肯定的，下面我們來摸擬一個表格對角線。
其原理：
用邊框線來摸擬斜線，我們知道，如果將一個DIV的邊框線設定得足夠寬並定義了不同的顏色時，其相鄰的兩條邊框線交界處就是斜線。知道了這個原理，我們就可以用border-left和border-top來類比出斜線的效果。
我們先建立一個結構：
<div class="out">
<b>類別</b>
<em>姓名</em>
</div>
我們用<div class="out">作為對角線的容器，我們來設定斜線樣式，關鍵代碼如下：
.out{
border-top:40px #D6D3D6 solid;/*上邊框寬度等於表格第一行行高*/
width:0px;/*讓容器寬度為0*/
height:0px;/*讓容器高度為0*/
border-left:80px #BDBABD solid;/*左邊框寬度等於表格第一行第一格寬度*/
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;}
這樣一個斜線對角線就類比出來了。知道了原理，你可以變成很多有趣的東西出來，祝你好運！
這種對角線類比法也有缺點：
1.寬高度必須是已知的
2.寬高的長度不能差得太大，你可以試試將寬度拉得比高度長好幾倍，看看效果。（給你們留點作業練習練習）
3.還有就是斜線條不能設定顏色。
另：以上代碼只測試了ie6和ff3，其它瀏覽器未做測試，請朋友們測試一下。
下面是完整的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>用div+css類比表格對角線</title><br /><style type="text/css"><br />*{padding:0;margin:0;}<br />caption{font-size:14px;font-weight:bold;}<br />table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;}<br />th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;}<br />th{background:#D6D3D6;}<br />/*類比對角線*/<br />.out{<br />border-top:40px #D6D3D6 solid;/*上邊框寬度等於表格第一行行高*/<br />width:0px;/*讓容器寬度為0*/<br />height:0px;/*讓容器高度為0*/<br />border-left:80px #BDBABD solid;/*左邊框寬度等於表格第一行第一格寬度*/<br />position:relative;/*讓裡面的兩個子容器絕對位置*/<br />}<br />b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}<br />em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}<br />.t1{background:#BDBABD;}<br /></style><br /></head><br /><body><br /><table><br /><caption>用div+css類比表格對角線</caption><br /><tr><br /><th style="width:80px;"><br /><div class="out"><br /><strong>類別</strong><br /><em>姓名</em><br /></div><br /></th><br /><th>年級</th><br /><th>班級</th><br /><th>成績</th><br /><th>班級均分</th><br /></tr><br /><tr><br /><td class="t1">張三</td><br /><td>三</td><br /><td>2</td><br /><td>62</td><br /><td>61</td><br /></tr><br /><tr><br /><td class="t1">李四</td><br /><td>三</td><br /><td>1</td><br /><td>48</td><br /><td>67</td><br /></tr><br /><tr><br /><td class="t1">王五</td><br /><td>三</td><br /><td>5</td><br /><td>79</td><br /><td>63</td><br /></tr><br /><tr><br /><td class="t1">趙六</td><br /><td>三</td><br /><td>4</td><br /><td>89</td><br /><td>66</td><br /></tr><br /></table><br /></body><br /></html><br /> 如果運行代碼顯示錯位的，請朋友下載到Demo到本地觀看。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
