表格表頭繪製對角線（不固定表格寬高）

時間 2019-11-09

標籤表格表頭繪製對角線固定简体版

原文原文鏈接

通常咱們的html表格表頭須要繪製對角線展現橫向、縱向表頭的類型，普通的實現方法就是使用css繪製兩個三角形，可是是在已知寬高的狀況下，若是站在基礎研發的角度確定是不行的，那麼我就臨時抱佛腳看了一下用svg繪製一條線，並使用這個svg文件做爲個人這個表格表頭的背景圖，沒想到效果仍是不錯的。css

下面貼出來html代碼html

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>表格表頭 對角線</title>
 8 <style type="text/css">
 9     body {TEXT-ALIGN: center;}
10     table th {
11         background-color: #2393df;
12         border: 1px solid #dddddd;
13         max-width: 150px;
14         min-width: 150px;
15     }
16     table thead tr:FIRST-CHILD th:FIRST-CHILD {
17         background-image: url(line.svg);
18     }
19 </style>
20 </head>
21 <body>
22     <table>
23         <thead>
24             <tr>
25             <th rowspan="2" style="position: relative;">
26                 <div class="clearfix" style="positin:absolute;top:5px;right:5px;"><font style="float:right;">橫向表頭</font></div>
27                 <br>
28                 <div style="positin:absolute;bottom:10px;left:10px;"><font style="float:left">縱向表頭</font></div>
29             </th>
30             <th colspan="2">縱向表頭1</th><th rowspan="2">縱向表頭3</th></tr>
31             <tr><th>縱向表頭1.1</th><th>縱向表頭1.2</th></tr>
32         </thead>
33         <tbody>
34             <tr><th>橫向表頭1</th><td>1</td><td>2</td><td>3</td></tr>
35             <tr><th>橫向表頭2</th><td>1</td><td>2</td><td>3</td></tr>
36             <tr><th>橫向表頭3</th><td>1</td><td>2</td><td>3</td></tr>
37             <tr><th>橫向表頭4</th><td>1</td><td>2</td><td>3</td></tr>
38             <tr><th>橫向表頭5</th><td>1</td><td>2</td><td>3</td></tr>
39             <tr><th>橫向表頭6</th><td>1</td><td>2</td><td>3</td></tr>
40             <tr><th>橫向表頭7</th><td>1</td><td>2</td><td>3</td></tr>
41         </tbody>
42     </table>
43 </body>
44 </html>

svg文件的代碼：java

1 <?xml version="1.0" standalone="no"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="white" stroke-width="1"/></svg>

最終的效果：svg

表頭的html代碼中有一個定位，這是爲了在我表頭分級的狀況下能更好的表達，上級和下級類別不同！ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。