【轉載】用div+css模擬表格對角線

時間 2019-11-17

標籤轉載 div+css div css 模擬表格對角線欄目 HTML 简体版

原文原文鏈接

本文引用藍色理想論壇。css

首先聲明：html

這只是探討一種CSS模擬表格對角線的用法，實際在工做中可能以爲這樣作有點小題大做，這不是本主題討論的重點。若是對此深覺得然的朋友，請一笑過之。。。瀏覽器

有時在插入文檔時，要用到表格對角線，常見的做法是用圖片的方式來處理，還有就是用vml來畫對角線，能不能用html+css方式來實現呢？答案是確定的，下面咱們來摸擬一個表格對角線。測試

原理：字體

用邊框線來摸擬斜線，咱們知道，若是將一個DIV的邊框線設置得足夠寬並定義了不一樣的顏色時，其相鄰的兩條邊框線交界處就是斜線。知道了這個原理，咱們就能夠用border-left和border-top來模擬出斜線的效果。ui

咱們先建立一個結構：spa

<div class="out">
    <b>類別</b>
    <em>姓名</em>
</div>

咱們用<div class="out">做爲對角線的容器，咱們來設置斜線樣式，關鍵代碼以下：code

.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；因其父容器設置了相對定位，因此設置其爲絕對定位，這樣能夠將它偏移到你想指定的位置了。orm

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

這樣一個斜線對角線就模擬出來了。知道了原理，你能夠變成不少有趣的東西出來，祝你好運！xml

這種對角線模擬法也有缺點：

寬高度必須是已知的
寬高的長度不能差得太大，你能夠試試將寬度拉得比高度長好幾倍，看看效果。（給大家留點做業練習練習）
還有就是斜線條不能設置顏色。

另：以上代碼只測試了ie6和ff3，其它瀏覽器未作測試，請朋友們測試一下。

下面是完整的代碼：

<!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模擬表格對角線</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;}
/*模擬對角線*/
.out{
   border-top:40px #D6D3D6 solid;/*上邊框寬度等於表格第一行行高*/
   width:0px;/*讓容器寬度爲0*/
   height:0px;/*讓容器高度爲0*/
   border-left:80px #BDBABD solid;/*左邊框寬度等於表格第一行第一格寬度*/    
   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>
    <th style="width:80px;">
        <div class="out">
            <b>類別</b>
            <em>姓名</em>
        </div>
    </th>
    <th>年級</th>
    <th>班級</th>
    <th>成績</th>
    <th>班級均分</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>