基于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、普通表格

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>display普通表格</title>

 <style type="text/css">

 .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}

 .table {display: table; width: 80%; border-collapse: collapse;}

 .table-tr {display: table-row; height: 30px;}

 .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}

 .table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}

 </style>

 </head>

 <body>

     <div class="table">

         <div class="table-tr">

             <div class="table-th">省份/直辖市</div>

             <div class="table-th">GDP(亿元)</div>

             <div class="table-th">增长率</div>

         </div>

         <div class="table-tr">

             <div class="table-td">广东</div>

             <div class="table-td">72812</div>

             <div class="table-td">8.0%</div>

         </div>

         <div class="table-tr">

             <div class="table-td">河南</div>

             <div class="table-td">37010</div>

             <div class="table-td">8.3%</div>

         </div>

         <div class="table-tr">

             <div class="table-td">江苏</div>

             <div class="table-td">70116</div>

             <div class="table-td">8.5%</div>

         </div>

     </div>

 </body>

 </html>

运行效果

2、列合并实现表格

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>基于display列合并表格</title>

 <style type="text/css">

 .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}

 .table {display: table; width: 80%; border-collapse: collapse;}

 .table-tr {display: table-row; height: 30px;}

 .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}

 .table-td {display: table-cell; height: 100%;}

 .sub-table {width: 100%;height: 100%;display: table;}

 .sub-table-tr {display: table-row; height: 100%;}

 .sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}

 </style>

 </head>

 <body>

 <div class="table">

     <div class="table-tr">

         <div class="table-td">

             <div class="sub-table">

                 <div class="sub-table-tr">

                     <div class="table-th" style="width: 40%;">省份／直辖市</div>

                     <div class="table-th" style="width: 30%;">GDP(亿元)</div>

                     <div class="table-th" style="width: 30%;">增长率</div>

                 </div>

             </div>

         </div>

     </div>

     <div class="table-tr">

         <div class="table-td">

             <div class="sub-table">

                 <div class="sub-table-tr">

                     <div class="sub-table-td" style="width: 40%;">广东</div>

                     <div class="sub-table-td" style="width: 30%;">72812</div>

                     <div class="sub-table-td" style="width: 30%;">8.0%</div>

                 </div>

             </div>

         </div>

     </div>

     <div class="table-tr">

         <div class="table-td">

             <div class="sub-table">

                 <div class="sub-table-tr">

                     <div class="sub-table-td" style="width: 40%;">河南</div>

                     <div class="sub-table-td" style="width: 30%;">37010</div>

                     <div class="sub-table-td" style="width: 30%;">8.3%</div>

                 </div>

             </div>

         </div>

     </div>

     <div class="table-tr">

         <div class="table-td">

             <div class="sub-table">

                 <div class="sub-table-tr">

                     <div class="sub-table-td" style="width: 40%;">江苏</div>

                     <div class="sub-table-td" style="width: 30%;">70116</div>

                     <div class="sub-table-td" style="width: 30%;">8.5%</div>

                 </div>

             </div>

         </div>

     </div>

     <div class="table-tr">

         <div class="table-td">

             <div class="sub-table">

                 <div class="sub-table-tr">

                     <div class="sub-table-td" style="width: 70%;">各省／直辖市GDP平均增长率</div>

                     <div class="sub-table-td" style="width: 30%;">8.26%</div>

                 </div>

             </div>

         </div>

     </div>

 </div>

 </body>

 </html>

运行效果

3、行合并表格

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>基于display的行合并表格</title>

 <style type="text/css">

 .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}

 .table {display: table; width: 80%; border-collapse: collapse;}

 .table-tr {display: table-row; height: 30px;}

 .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}

 .table-td {display: table-cell; height: 100%;}

 .sub-table {width: 100%;height: 100%;display: table;}

 .sub-table-tr {display: table-row; height: 100%;}

 .sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}

 </style>

 </head>

 <body>

 <div class="table">

     <div class="table-tr">

         <div class="table-td">

             <div class="sub-table">

                 <div class="sub-table-tr">

                     <div class="table-th" style="width: 40%;">省份／直辖市</div>

                     <div class="table-th" style="width: 30%;">GDP(亿元)</div>

                     <div class="table-th" style="width: 30%;">增长率</div>

                 </div>

             </div>

         </div>

     </div>

     <div class="table-tr">

         <div class="table-td">

             <div class="sub-table">

                 <div class="sub-table-tr">

                     <div class="sub-table-td" style="width: 40%;">广东</div>

                     <div class="sub-table-td" style="width: 30%;">72812</div>

                     <div class="sub-table-td" style="width: 30%;">8.0%</div>

                 </div>

             </div>

         </div>

     </div>

     <div class="table-tr" style="height:60px;">

         <div class="table-td">

             <div class="sub-table">

                 <div class="sub-table-tr">

                     <div class="sub-table-td" style="width: 40%; border: none;">

                         <div class="sub-table">

                             <div class="sub-table-tr" style="height:50%;">

                                 <div class="sub-table-td" style="width: 100%; height:50%;">

                                     河南

                                 </div>

                             </div>

                             <div class="sub-table-tr" style="height:50%;">

                                 <div class="sub-table-td" style="width: 100%; height:50%;">

                                     江苏

                                 </div>

                             </div>

                         </div>

                     </div>

                     <div class="sub-table-td" style="width: 30%;border: none;">

                         <div class="sub-table">

                             <div class="sub-table-tr" style="height:50%;">

                                 <div class="sub-table-td" style="width: 100%; height:50%;">

                                     37010

                                 </div>

                             </div>

                             <div class="sub-table-tr" style="height:50%;">

                                 <div class="sub-table-td" style="width: 100%; height:50%;">

                                     70116

                                 </div>

                             </div>

                         </div>

                     </div>

                     <div class="sub-table-td" style="width: 30%;border: none;">

                         <div class="sub-table">

                             <div class="sub-table-tr">

                                 <div class="sub-table-td" style="width: 100%;">

                                     8.4%

                                 </div>

                             </div>

                         </div>

                     </div>

                 </div>

             </div>

         </div>

     </div>

     <div class="table-tr">

         <div class="table-td">

             <div class="sub-table">

                 <div class="sub-table-tr">

                     <div class="sub-table-td" style="width: 70%;">各省／直辖市GDP平均增长率</div>

                     <div class="sub-table-td" style="width: 30%;">8.26%</div>

                 </div>

             </div>

         </div>

     </div>

 </div>

 </body>

 </html>

运行效果：

END

基于CSS属性display:table的表格布局的使用的更多相关文章

CSS：display:table
使用display:table 垂直居中需要结合display:table-cell; 和vertical-align:middle; <!DOCTYPE html> <html l ...
display:table合并表格
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
CSS属性display的浅略探讨
display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...
CSS属性Display（显示）和Visibility（可见性）
隐藏一个元素可以通过把display属性设置为“none”,或把visibility属性设置为“hidden”.但是请注意,这两种方法会产生不同的效果. Visibility:hidden可以隐藏某个 ...
CSS基础学习-6.CSS属性_列表、表格
display属性的表格布局相关属性
基于CSS属性display:table的表格布局的使用项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的tabl ...
用CSS实现“表格布局”
当我们进行浮动布局时,会发现存在着非浮动元素与浮动元素的底部难以对齐的情况,这就是浮动布局的缺陷.因此,过去的前端工作者曾利用<table>以实现"表格布局".因为表格 ...
关于css布局的记录(一) --table和flex布局
1.table方式布局效果图: 直接用table等标签布局,table布局自动垂直居中亦可用 display:table == <table>.display:table-cell = ...
CSS属性 table 的 border-collapse 边框合并
说明该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框 separate 缺省值.边框分开,不合并.collapse 边框合并.即如果相邻,则共用同一个边框. 虽然在DIV+ ...

随机推荐

又一次认识java（七） ---- final keyword
你总以为你会了,事实上你仅仅是一知半解. final 关键字概览 final关键字可用于声明属性.方法.參数和类,分别表示属性不可变.方法不可覆盖.參数不可变和类不能够继承. 我们来分别看看它的使用方 ...
【转载】浅析依赖倒置（DIP）、控制反转(IOC)和依赖注入(DI)
原文地址 http://blog.csdn.net/briblue/article/details/75093382 写这篇文章的原因是这两天在编写关于 Dagger2 主题的博文时,花了大量的精力来 ...
乾坤合一~Linux设备驱动之块设备驱动
1. 题外话在蜕变成蝶的一系列学习当中,我们已经掌握了大部分Linux驱动的知识,在乾坤合一的分享当中,以综合实例为主要讲解,在一个月的蜕茧成蝶的学习探索当中,觉得数据结构,指针,链表等等占据了代码 ...
Ubuntu下pdf和图片互转
前边文章可以将ppt转换为pdf 查看使用unoconv将ppt转为pdf,再使用imagemagick将pdf转为图片这次想将pdf和图片进行互转当前目录下只有2.ppt 1.ppt转pdf ...
Object.assign方法的使用
https://www.cnblogs.com/chenyablog/p/6930596.html
基于VS Code快速搭建Java项目
有时候随手想写一点Java测试代码,以控制台程序为主,还会用到一些其它框架,并基于Maven构建. 1.Java Extension Pack一定要安装. 2.VS Code打开一个指定目录,创建相应 ...
最新版本sublime text3注册码
TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA12C0 A37081C5 D03164 ...
11.17 flask (1)
2018-11-17 18:38:42 开始学习进行玩前面项目开始进军flask flask是一个小型的web框架,,但是有很多第三方组件最后组装组装就和django一样啦!!!!!!! pyt ...
centos7邮件服务器SSL配置
在上篇文章centos7搭建postfix邮件服务器的搭建中我们没有配置SSL,接下来我们在这篇文章中讲讲centos7邮件服务器SSL配置. 1. 创建SSL证书 [root@www ~]# cd ...
剑指offer——python【第40题】数组中只出现一次的数字
题目描述一个整型数组里除了两个数字之外,其他的数字都出现了偶数次.请写程序找出这两个只出现一次的数字. 思路和那道字符串里面第一次出现唯一字符的题目类似,使用count计数方法:另外百度了一下发现 ...