CSSdisplay属性的table表格布局
项⽬改造中遇到DIV+CSS实现的table，新需求需要在表格使⽤单元格合并，⽹上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过⼀番思考，曲折现实了单元格的合并，即采⽤正⾏嵌套⼀个单独的display:table的DIV，然后在嵌套的表格DIV内部通过控制⾏列数和⾏列的⾼度，实现单元格合并。个⼈建议全新实现使⽤<table> HTML标签即可
⼀、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>）
⼆、⽰例代码
1、普通表格
XML/HTML Code复制内容到剪贴板
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>
运⾏效果
2、列合并实现表格
实现思路：基于display:table的表格实现，没有<table>的rowspan和colspan单元格合并的实现，所以曲折实现，将表格每⾏单独嵌套⼀个独⽴的表格，这样在嵌套的独⽴表格内部，单元格合并就能通过控制嵌套表格的⾏数和列数以及单元格的宽⾼来实现
XML/HTML Code复制内容到剪贴板
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" >省份／直辖市</div>
28.                    <div class="table-th" >GDP(亿元)</div>
29.                    <div class="table-th" >增长率</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" >⼴东</div>
39.                    <div class="sub-table-td" >72812</div>
40.                    <div class="sub-table-td" >8.0%</div>
41.                </div>
42.            </div>
43.        </div>
44.    </div>
css表格样式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" >河南</div>
50.                    <div class="sub-table-td" >37010</div>
51.                    <div class="sub-table-td" >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" >江苏</div>
61.                    <div class="sub-table-td" >70116</div>
62.                    <div class="sub-table-td" >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" >各省／直辖市GDP平均增长率</div>
72.                    <div class="sub-table-td" >8.26%</div>
73.                </div>
74.            </div>
75.        </div>
76.    </div>
77. </div>
78. </body>
79. </html>
运⾏效果
3、⾏合并表格
⾏合并的实现思路：与列合并的实现思路类似，将有单元格合并的列单独嵌套⼀个display为table的DIV，⾼度=单⾏⾼*单元格合并数⽬的倍数，同⾏的其他列同样均单独嵌套DIV，实例代码如下
XML/HTML Code复制内容到剪贴板
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" >省份／直辖市</div>
28.                    <div class="table-th" >GDP(亿元)</div>
29.                    <div class="table-th" >增长率</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" >⼴东</div>
39.                    <div class="sub-table-td" >72812</div>
40.                    <div class="sub-table-td" >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" >
50.                        <div class="sub-table">
51.                            <div class="sub-table-tr" >
52.                                <div class="sub-table-td" >
53. 河南
54.                                </div>
55.                            </div>
56.                            <div class="sub-table-tr" >
57.                                <div class="sub-table-td" >
58. 江苏
59.                                </div>
60.                            </div>
61.                        </div>
62.                    </div>
63.                    <div class="sub-table-td" >
64.                        <div class="sub-table">
65.                            <div class="sub-table-tr" >
66.                                <div class="sub-table-td" >
67.                                    37010
68.                                </div>
69.                            </div>
70.                            <div class="sub-table-tr" >
71.                                <div class="sub-table-td" >
72.                                    70116
73.                                </div>
74.                            </div>
75.                        </div>
76.
77.                    </div>
78.
79.                    <div class="sub-table-td" >
80.                        <div class="sub-table">
81.                            <div class="sub-table-tr">
82.                                <div class="sub-table-td" >
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" >各省／直辖市GDP平均增长率</div>
97.                    <div class="sub-table-td" >8.26%</div>
98.                </div>
99.            </div>
100.        </div>
101.    </div>
102. </div>
103. </body>
104. </html>
运⾏效果：
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。