基于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 web service 写入图片到web/img/
获取本类service路径,然后字符串截取和拼接 String classpath= this.getClass().getResource("/").getPath(); Str ...
Android 最流行的吸顶效果的实现及代码
开始逐渐领略到ItemDecoration的美~ 今天让我使用 ItemDecoration 来完成可推动的悬浮导航栏的效果,最终实现的效果如下图: 具体实现步骤如下: 根据我前面的文章所讲的Re ...
最方便最好看最好用的python日志。
这个日志没有依赖自己的其他包,复制即可运行,也可以从pypi网站上下载或者pip来安装这个日志. 1.日志内置了7种模板,其中模版4和模板5,可以实现点击日志跳转到指定文件指定行数的功能,史无前例的实 ...
is not in the sudoers file解决方法
用sudo时提示"xxx is not in the sudoers file. This incident will be reported.其中XXX是你的用户名,也就是你的用户名没有权 ...
Kafka获取订阅某topic的所有consumer group【客户端版】
之前写过如何用服务器端的API代码来获取订阅某topic的所有consumer group,参见这里.使用服务器端的API需要用到kafka.admin.AdminClient类,但是这个类在0.11 ...
vim不支持鼠标中键拷贝粘贴
ubuntu 和mint默认安装的vim是不支持系统剪切.粘贴版的,需要执行以下安装:sudo apt-get install vim-gnome
LeetCode - 498. Diagonal Traverse
Given a matrix of M x N elements (M rows, N columns), return all elements of the matrix in diagonal ...
Tomcat中的Listener源码片段解读
@Override public <T extends EventListener> void addListener(T t) { if (!context.getState().equ ...
js监听手机端点击物理返回键或js监听pc端点击浏览器返回键
之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...