项目改造中遇到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的表格布局的使用的更多相关文章

  1. CSS：display:table

    使用display:table 垂直居中需要结合display:table-cell; 和vertical-align:middle; <!DOCTYPE html> <html l ...

  2. display:table合并表格

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. CSS属性display的浅略探讨

    display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...

  4. CSS属性Display（显示）和Visibility（可见性）

    隐藏一个元素可以通过把display属性设置为“none”,或把visibility属性设置为“hidden”.但是请注意,这两种方法会产生不同的效果. Visibility:hidden可以隐藏某个 ...

  5. CSS基础学习-6.CSS属性_列表、表格

  6. display属性的表格布局相关属性

    基于CSS属性display:table的表格布局的使用   项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的tabl ...

  7. 用CSS实现“表格布局”

    当我们进行浮动布局时,会发现存在着非浮动元素与浮动元素的底部难以对齐的情况,这就是浮动布局的缺陷.因此,过去的前端工作者曾利用<table>以实现"表格布局".因为表格 ...

  8. 关于css布局的记录(一) --table和flex布局

    1.table方式布局 效果图: 直接用table等标签布局,table布局自动垂直居中 亦可用 display:table == <table>.display:table-cell = ...

  9. CSS属性 table 的 border-collapse 边框合并

    说明 该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框 separate 缺省值.边框分开,不合并.collapse 边框合并.即如果相邻,则共用同一个边框. 虽然在DIV+ ...

随机推荐

  1. git 中merge的用法

    git merge –no-ff 可以保存你之前的分支历史.能够更好的查看 merge历史,以及branch 状态. git merge 则不会显示 feature,只保留单条分支记录.

  2. Git-简单的利用SourceTree提交代码（转载）

    http://www.cnblogs.com/shenyangxiaohuo/p/5239723.html

  3. 《转载》JVM垃圾回收机制

    本文转载自ImportNew - 郑雯 每个Java程序员迟早都会碰到下面这个错误: java.lang.OutOfMemoryError 这个时候一般会建议采用如下方式解决这个错误: 增加MaxPe ...

  4. intelj idea Database视图竟然还悄悄开进程，不能忍

    一.前言 偶然发现,任务管理器里有个莫名其妙的java进程.看了下启动参数: CommandLine="C:\Program Files\Java\jdk1.8.0_172\bin\java ...

  5. ubuntu 14.04升级python2

    http://blog.csdn.net/zahuopuboss/article/details/50927432

  6. 解决org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)错误

    我调这个bug调了一天多,在网上搜索的检查namespace,package等,都没有错.错误提示是没有找到xml文件,我就纳闷了,为什么找不到呢?后来才发现,原来是resource中奇怪的目录为题, ...

  7. zhenya moves from parents

    Zhenya moved from his parents' home to study in other city. He didn't take any cash with him, he onl ...

  8. Solve Error: "errcode": 85005, "errmsg": "appid not bind weapp hint"

    在使用微信官方给的添加自定义菜单的示例代码: { "button":[ { "type":"click", "name" ...

  9. php算法题2

    一群猴子排成一圈,按1,2,…,n依次编号.然后从第1只开始数,数到第m只,把它踢出圈,从它后面再开始数,再数到第m只,在把它踢出去…,如此不停的进行下去,直到最后只剩下一只猴子为止,那只猴子就叫做大 ...

  10. particles.js中文开发手册

    2017年6月17日01:06:28 因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错,就弄了一个 官方github:https://github.com/Vin ...