欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

基于CSS属性display:table的表格布局的使用 - MySomeDay

程序员文章站 2022-03-26 09:21:38
...
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的display:table的DIV，然后在嵌套的表格DIV内部通过控制行列数和行列的高度，实现单元格合并。个人建议全新实现使用 HTML标签即可

一、CSS display属性的表格布局相关属性的解释：

  • table 此元素会作为块级表格来显示（类似
），表格前后带有换行符。
  • table-row-group 此元素会作为一个或多个行的分组来显示（类似
）。
  • table-header-group 此元素会作为一个或多个行的分组来显示（类似
）。
  • table-footer-group 此元素会作为一个或多个行的分组来显示（类似
）。
  • table-row 此元素会作为一个表格行显示（类似
）。
  • table-column-group 此元素会作为一个或多个列的分组来显示（类似
）。
  • table-column 此元素会作为一个单元格列显示（类似
）
  • table-cell 此元素会作为一个表格单元格显示（类似

二、示例代码

1、普通表格

 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">72812div>
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">37010div>
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">70116div>
34             div class="table-td">8.5%div>
35         div>
36     div>
37 body>
38 html>

运行效果

基于CSS属性display:table的表格布局的使用 - MySomeDay


2、列合并实现表格

实现思路：基于display:table的表格实现，没有
和 ）
  • table-caption 此元素会作为一个表格标题显示（类似
）
的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%;">72812div>
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%;">37010div>
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%;">70116div>
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>

运行效果

基于CSS属性display:table的表格布局的使用 - MySomeDay


3、行合并表格

行合并的实现思路：与列合并的实现思路类似，将有单元格合并的列单独嵌套一个display为table的DIV，高度=单行高*单元格合并数目的倍数，同行的其他列同样均单独嵌套DIV，实例代码如下

  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%;">72812div>
 40                     div class="sub-table-td" style="width: 30%;">8.0%div>
 41                 div>
 42             div>
 43         div>
 44     基于CSS属性display:table的表格布局的使用 - MySomeDay
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章

相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论
  • 基于CSS属性display:table的表格布局的使用 - MySomeDay

    • 专题推荐

    作者信息
    基于CSS属性display:table的表格布局的使用 - MySomeDay

    认证0级讲师

    发布技术文章
    • 最新文章
    • 热门排行
    推荐视频教程
  • 基于CSS属性display:table的表格布局的使用 - MySomeDayjavascript初级视频教程
  • 基于CSS属性display:table的表格布局的使用 - MySomeDayjquery 基础视频教程
    • 视频教程分类

    ：公益在线php培训，帮助PHP学习者快速成长！

    Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1基于CSS属性display:table的表格布局的使用 - MySomeDay关于我们免责申明赞助与捐赠广告合作

    基于CSS属性display:table的表格布局的使用 - MySomeDay   基于CSS属性display:table的表格布局的使用 - MySomeDay
    相关标签： 基于CSS属性display:table的表格布局的使用 - MySomeDay

    上一篇： 爬取慕课网课程信息实例教程

    下一篇： [ubuntu]

    推荐阅读