表格左上角單元格對角線效果例項程式碼

admin發表於2017-02-23

表格的左上角的單元格帶有一個對角線，用於分類，這樣可以更為清晰形象。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

上面的程式碼實現了這樣的功能，讓表格看起來更為有序人性化。

相關文章