CSS display属性的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. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>display普通表格</title>
  6. <styletype="text/css">
  7. .table,.table*{margin:0auto;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:1pxsolidgray;text-align:center;vertical-align:middle;background-color:#E5E5E5;}
  11. .table-td{display:table-cell;height:100%;border:1pxsolidgray;text-align:center;vertical-align:middle;}
  12. </style>
  13. </head>
  14. <body>
  15. <divclass="table">
  16. <divclass="table-tr">
  17. <divclass="table-th">省份/直辖市</div>
  18. <divclass="table-th">GDP(亿元)</div>
  19. <divclass="table-th">增长率</div>
  20. </div>
  21. <divclass="table-tr">
  22. <divclass="table-td">广东</div>
  23. <divclass="table-td">72812</div>
  24. <divclass="table-td">8.0%</div>
  25. </div>
  26. <divclass="table-tr">
  27. <divclass="table-td">河南</div>
  28. <divclass="table-td">37010</div>
  29. <divclass="table-td">8.3%</div>
  30. </div>
  31. <divclass="table-tr">
  32. <divclass="table-td">江苏</div>
  33. <divclass="table-td">70116</div>
  34. <divclass="table-td">8.5%</div>
  35. </div>
  36. </div>
  37. </body>
  38. </html>

运行效果

2、列合并实现表格

实现思路：基于display:table的表格实现，没有<table>的rowspan和colspan单元格合并的实现，所以曲折实现，将表格每行单独嵌套一个独立的表格，这样在嵌套的独立表格内部，单元格合并就能通过控制嵌套表格的行数和列数以及单元格的宽高来实现

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>基于display列合并表格</title>
  6. <styletype="text/css">
  7. .table,.table*{margin:0auto;padding:0;font-size:14px;font-family:Arial,宋体,Helvetica,sans-serif;}
  8. .table{display:table;width:80%;border-collapse:collapse;}
  10. .table-tr{display:table-row;height:30px;}
  11. .table-th{display:table-cell;font-weight:bold;height:100%;border:1pxsolidgray;text-align:center;vertical-align:middle;background-color:#E5E5E5;}
  12. .table-td{display:table-cell;height:100%;}
  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:1pxsolidgray;text-align:center;vertical-align:middle;}
  18. </style>
  19. </head>
  20. <body>
  22. <divclass="table">
  23. <divclass="table-tr">
  24. <divclass="table-td">
  25. <divclass="sub-table">
  26. <divclass="sub-table-tr">
  27. <divclass="table-th"style="width:40%;">省份／直辖市</div>
  28. <divclass="table-th"style="width:30%;">GDP(亿元)</div>
  29. <divclass="table-th"style="width:30%;">增长率</div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <divclass="table-tr">
  35. <divclass="table-td">
  36. <divclass="sub-table">
  37. <divclass="sub-table-tr">
  38. <divclass="sub-table-td"style="width:40%;">广东</div>
  39. <divclass="sub-table-td"style="width:30%;">72812</div>
  40. <divclass="sub-table-td"style="width:30%;">8.0%</div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. <divclass="table-tr">
  46. <divclass="table-td">
  47. <divclass="sub-table">
  48. <divclass="sub-table-tr">
  49. <divclass="sub-table-td"style="width:40%;">河南</div>
  50. <divclass="sub-table-td"style="width:30%;">37010</div>
  51. <divclass="sub-table-td"style="width:30%;">8.3%</div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <divclass="table-tr">
  57. <divclass="table-td">
  58. <divclass="sub-table">
  59. <divclass="sub-table-tr">
  60. <divclass="sub-table-td"style="width:40%;">江苏</div>
  61. <divclass="sub-table-td"style="width:30%;">70116</div>
  62. <divclass="sub-table-td"style="width:30%;">8.5%</div>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. <divclass="table-tr">
  68. <divclass="table-td">
  69. <divclass="sub-table">
  70. <divclass="sub-table-tr">
  71. <divclass="sub-table-td"style="width:70%;">各省／直辖市GDP平均增长率</div>
  72. <divclass="sub-table-td"style="width:30%;">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. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>基于display的行合并表格</title>
  6. <styletype="text/css">
  7. .table,.table*{margin:0auto;padding:0;font-size:14px;font-family:Arial,宋体,Helvetica,sans-serif;}
  8. .table{display:table;width:80%;border-collapse:collapse;}
  10. .table-tr{display:table-row;height:30px;}
  11. .table-th{display:table-cell;font-weight:bold;height:100%;border:1pxsolidgray;text-align:center;vertical-align:middle;background-color:#E5E5E5;}
  12. .table-td{display:table-cell;height:100%;}
  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:1pxsolidgray;text-align:center;vertical-align:middle;}
  18. </style>
  19. </head>
  20. <body>
  22. <divclass="table">
  23. <divclass="table-tr">
  24. <divclass="table-td">
  25. <divclass="sub-table">
  26. <divclass="sub-table-tr">
  27. <divclass="table-th"style="width:40%;">省份／直辖市</div>
  28. <divclass="table-th"style="width:30%;">GDP(亿元)</div>
  29. <divclass="table-th"style="width:30%;">增长率</div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <divclass="table-tr">
  35. <divclass="table-td">
  36. <divclass="sub-table">
  37. <divclass="sub-table-tr">
  38. <divclass="sub-table-td"style="width:40%;">广东</div>
  39. <divclass="sub-table-td"style="width:30%;">72812</div>
  40. <divclass="sub-table-td"style="width:30%;">8.0%</div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. <divclass="table-tr"style="height:60px;">
  46. <divclass="table-td">
  47. <divclass="sub-table">
  48. <divclass="sub-table-tr">
  49. <divclass="sub-table-td"style="width:40%;border:none;">
  50. <divclass="sub-table">
  51. <divclass="sub-table-tr"style="height:50%;">
  52. <divclass="sub-table-td"style="width:100%;height:50%;">
  53. 河南
  54. </div>
  55. </div>
  56. <divclass="sub-table-tr"style="height:50%;">
  57. <divclass="sub-table-td"style="width:100%;height:50%;">
  58. 江苏
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <divclass="sub-table-td"style="width:30%;border:none;">
  64. <divclass="sub-table">
  65. <divclass="sub-table-tr"style="height:50%;">
  66. <divclass="sub-table-td"style="width:100%;height:50%;">
  67. 37010
  68. </div>
  69. </div>
  70. <divclass="sub-table-tr"style="height:50%;">
  71. <divclass="sub-table-td"style="width:100%;height:50%;">
  72. 70116
  73. </div>
  74. </div>
  75. </div>
  77. </div>
  79. <divclass="sub-table-td"style="width:30%;border:none;">
  80. <divclass="sub-table">
  81. <divclass="sub-table-tr">
  82. <divclass="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. <divclass="table-tr">
  93. <divclass="table-td">
  94. <divclass="sub-table">
  95. <divclass="sub-table-tr">
  96. <divclass="sub-table-td"style="width:70%;">各省／直辖市GDP平均增长率</div>
  97. <divclass="sub-table-td"style="width:30%;">8.26%</div>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </body>
  104. </html>

运行效果：

以上就是本文的全部内容，希望对大家的学习有所帮助

原文：http://www.cnblogs.com/haoqipeng/p/5309491.html

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例
CSS浮动引起的高度塌陷问题