基于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+ ...

随机推荐

BarTender怎样同时打印自动日期和流水号？
大多数条形码中都会含有日期和数量信息,而且大部分都是两者兼具.有些使用BarTender软件的小伙伴,不知道怎么同时打印自动日期和流水号,即条形码中兼有自动日期和序列号,且它们都能根据打印的变化而变化 ...
iOS 指导文章
1. iOS 后台运行实现总结 http://www.jianshu.com/p/d3e279de2e32 2. C语言的各种版本:C89,AMD1,C99,C11:http://www.tuicoo ...
VS2017 编译Assimp
1. 下载Assimp:http://assimp.sourceforge.net/ 2. 要下载和安装DirectX SDK 安装出现错误,错误代码s1023,解决方法:https://blog.c ...
[原]Docker-issue(1) image name 显示为 <none>
问题:今天发现重新上传新的image的时候覆盖了原来的镜像后,REPOSITORY 就变为了 <none> ,如下图解决办法: 使用tag重新命名image 问题解决:
JAVA课程之简易课程登记
实现技术JSP+Servlet+MySQL 思想:首先前台用jsp获取数据,然后用Form表单传值给Servlet,Servlet操作MySQL,获取数据再通过jsp显示 1.jsp功能选择界面 &l ...
filter的知识点和实例
一.过滤器Filter 1．filter的简介 filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标资源访问前后进行逻辑处理 2．快速入门步骤: 1)编写一个 ...
HttpRequest获得服务端和客户端的详细信息
参考文档:http://blog.csdn.net/u012104100/article/details/43051301 http://blog.csdn.net/u011162260/articl ...
python中字符串格式化的四种方法
name = "huangemiling" age= 10 address = 'nanjing' print("My name is %s,age is %d,I co ...
Windows下64位Apache+PHP+MySQL配置
软件下载目前,Apache和PHP均未出现官方的64位版本. Apache 64位: http://files.cnblogs.com/liangjie/httpd-2.2.19-win64.rar ...
HTML、CSS知识点,面试开发都会需要--No.6 设置背景
No.6 设置背景 1.background (1)如何设置背景:背景可通过color.image.gradient渐变或者组合方法设置. (2)background-color:颜色格式可以是十六进 ...