display屬性的表格佈局相關屬性
基於CSS屬性display:table的表格佈局的使用
項目改造中遇到DIV+CSS實現的table，新需求須要在表格使用單元格合併，網上調查返現CSS display:table實現的table表格，沒有單元格的屬性和樣式，通過一番思考，曲折現實了單元格的合併，即採用正行嵌套一個單獨的display:table的DIV，而後在嵌套的表格DIV內部經過控制行列數和行列的高度，實現單元格合併。我的建議全新實現使用<table> HTML標籤便可css
1、CSS display屬性的表格佈局相關屬性的解釋：
- table 此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。
- table-row-group 此元素會做爲一個或多個行的分組來顯示（相似 <tbody>）。
- table-header-group 此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。
- table-footer-group 此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。
- table-row 此元素會做爲一個表格行顯示（相似 <tr>）。
- table-column-group 此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。
- table-column 此元素會做爲一個單元格列顯示（相似 <col>）
- table-cell 此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）
- table-caption 此元素會做爲一個表格標題顯示（相似 <caption>）
2、示例代碼
一、普通表格
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>display普通表格</title>
6 <style type="text/css">
7 .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋體, Helvetica, sans-serif;}
8 .table {display: table; width: 80%; border-collapse: collapse;}
9 .table-tr {display: table-row; height: 30px;}
10 .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}
11 .table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}
12 </style>
13 </head>
14 <body>
15 <div class="table">
16 <div class="table-tr">
17 <div class="table-th">省份/直轄市</div>
18 <div class="table-th">GDP(億元)</div>
19 <div class="table-th">增加率</div>
20 </div>
21 <div class="table-tr">
22 <div class="table-td">廣東</div>
23 <div class="table-td">72812</div>
24 <div class="table-td">8.0%</div>
25 </div>
26 <div class="table-tr">
27 <div class="table-td">河南</div>
28 <div class="table-td">37010</div>
29 <div class="table-td">8.3%</div>
30 </div>
31 <div class="table-tr">
32 <div class="table-td">江蘇</div>
33 <div class="table-td">70116</div>
34 <div class="table-td">8.5%</div>
35 </div>
36 </div>
37 </body>
38 </html>
運行效果html
二、列合併實現表格
實現思路：基於display:table的表格實現，沒有<table>的rowspan和colspan單元格合併的實現，因此曲折實現，將表格每行單獨嵌套一個獨立的表格，這樣在嵌套的獨立表格內部，單元格合併就能經過控制嵌套表格的行數和列數以及單元格的寬高來實現佈局
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>基於display列合併表格</title>
6 <style type="text/css">
7 .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋體, Helvetica, sans-serif;}
8 .table {display: table; width: 80%; border-collapse: collapse;}
9
10 .table-tr {display: table-row; height: 30px;}
11 .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}
12 .table-td {display: table-cell; height: 100%;}
13
14 .sub-table {width: 100%;height: 100%;display: table;}
15 .sub-table-tr {display: table-row; height: 100%;}
16 .sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}
17
18 </style>
19 </head>
20 <body>
21
22 <div class="table">
23 <div class="table-tr">
24 <div class="table-td">
25 <div class="sub-table">
26 <div class="sub-table-tr">
27 <div class="table-th" style="width: 40%;">省份／直轄市</div>
28 <div class="table-th" style="width: 30%;">GDP(億元)</div>
29 <div class="table-th" style="width: 30%;">增加率</div>
30 </div>
31 </div>
32 </div>
33 </div>
34 <div class="table-tr">
35 <div class="table-td">
36 <div class="sub-table">
37 <div class="sub-table-tr">
38 <div class="sub-table-td" style="width: 40%;">廣東</div>
39 <div class="sub-table-td" style="width: 30%;">72812</div>
40 <div class="sub-table-td" style="width: 30%;">8.0%</div>
41 </div>
42 </div>
43 </div>
44 </div>
45 <div class="table-tr">
46 <div class="table-td">
47 <div class="sub-table">
48 <div class="sub-table-tr">
49 <div class="sub-table-td" style="width: 40%;">河南</div>
50 <div class="sub-table-td" style="width: 30%;">37010</div>
51 <div class="sub-table-td" style="width: 30%;">8.3%</div>
52 </div>
53 </div>
54 </div>
55 </div>
56 <div class="table-tr">
57 <div class="table-td">
58 <div class="sub-table">
59 <div class="sub-table-tr">
60 <div class="sub-table-td" style="width: 40%;">江蘇</div>
61 <div class="sub-table-td" style="width: 30%;">70116</div>
62 <div class="sub-table-td" style="width: 30%;">8.5%</div>
63 </div>
64 </div>
65 </div>
66 </div>
67 <div class="table-tr">
68 <div class="table-td">
69 <div class="sub-table">
70 <div class="sub-table-tr">
71 <div class="sub-table-td" style="width: 70%;">各省／直轄市GDP平均增加率</div>
72 <div class="sub-table-td" style="width: 30%;">8.26%</div>
73 </div>
74 </div>
75 </div>
76 </div>
77 </div>
78 </body>
79 </html>
運行效果post
三、行合併表格
行合併的實現思路：與列合併的實現思路相似，將有單元格合併的列單獨嵌套一個display爲table的DIV，高度=單行高*單元格合併數目的倍數，同行的其餘列一樣均單獨嵌套DIV，實例代碼以下url
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>基於display的行合併表格</title>
6 <style type="text/css">
7 .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋體, Helvetica, sans-serif;}
8 .table {display: table; width: 80%; border-collapse: collapse;}
9
10 .table-tr {display: table-row; height: 30px;}
11 .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}
12 .table-td {display: table-cell; height: 100%;}
13
14 .sub-table {width: 100%;height: 100%;display: table;}
15 .sub-table-tr {display: table-row; height: 100%;}
16 .sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}
17
18 </style>
19 </head>
20 <body>
21
22 <div class="table">
23 <div class="table-tr">
24 <div class="table-td">
25 <div class="sub-table">
26 <div class="sub-table-tr">
27 <div class="table-th" style="width: 40%;">省份／直轄市</div>
28 <div class="table-th" style="width: 30%;">GDP(億元)</div>
29 <div class="table-th" style="width: 30%;">增加率</div>
30 </div>
31 </div>
32 </div>
33 </div>
34 <div class="table-tr">
35 <div class="table-td">
36 <div class="sub-table">
37 <div class="sub-table-tr">
38 <div class="sub-table-td" style="width: 40%;">廣東</div>
39 <div class="sub-table-td" style="width: 30%;">72812</div>
40 <div class="sub-table-td" style="width: 30%;">8.0%</div>
41 </div>
42 </div>
43 </div>
44 </div>
45 <div class="table-tr" style="height:60px;">
46 <div class="table-td">
47 <div class="sub-table">
48 <div class="sub-table-tr">
49 <div class="sub-table-td" style="width: 40%; border: none;">
50 <div class="sub-table">
51 <div class="sub-table-tr" style="height:50%;">
52 <div class="sub-table-td" style="width: 100%; height:50%;">
53 河南
54 </div>
55 </div>
56 <div class="sub-table-tr" style="height:50%;">
57 <div class="sub-table-td" style="width: 100%; height:50%;">
58 江蘇
59 </div>
60 </div>
61 </div>
62 </div>
63 <div class="sub-table-td" style="width: 30%;border: none;">
64 <div class="sub-table">
65 <div class="sub-table-tr" style="height:50%;">
66 <div class="sub-table-td" style="width: 100%; height:50%;">
67 37010
68 </div>
69 </div>
70 <div class="sub-table-tr" style="height:50%;">
71 <div class="sub-table-td" style="width: 100%; height:50%;">
72 70116
73 </div>
74 </div>
75 </div>
76
77 </div>
78
79 <div class="sub-table-td" style="width: 30%;border: none;">
80 <div class="sub-table">
81 <div class="sub-table-tr">
82 <div class="sub-table-td" style="width: 100%;">
83 8.4%
84 </div>
85 </div>
86 </div>
87 </div>
88 </div>
89 </div>
90 </div>
91 </div>
92 <div class="table-tr">
93 <div class="table-td">
94 <div class="sub-table">
95 <div class="sub-table-tr">
96 <div class="sub-table-td" style="width: 70%;">各省／直轄市GDP平均增加率</div>
97 <div class="sub-table-td" style="width: 30%;">8.26%</div>
98 </div>
99 </div>
100 </div>
101 </div>
102 </div>
103 </body>
104 </html>
運行效果：spa
相關文章
- 1. div+CSS佈局（佈局相關屬性）
- 2. display屬性的Flex佈局的學習
- 3. CSS中的display屬性的flex佈局
- 4. CSS中display屬性的Flex佈局
- 5. CSS3中display屬性的Flex佈局
- 6. 相對佈局相關屬性
- 7. RelativeLayout相關的佈局屬性
- 8. 談談CSS3中display屬性的Flex佈局（彈性佈局）
- 9. display的屬性
- 10. 表格的相關標籤和屬性
- 更多相關文章...
- • XML 相關技術 - XML 教程
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • NewSQL-TiDB相關
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
