项目改造中遇到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. NuGet Packages are missing,This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them.

    错误内容 This project references NuGet package(s) that are missing on this computer. Use NuGet Package R ...

  2. .net读取Excel转datatable、.net读取的Excel存在合并单元格并且转成datatable

    项目中经常会遇到Excel导入数据,Excel的模板会可能是存在合并单元格的,模板如下图所示 读取时需要填充合并单元格的值,转成datatable单元格值时,填充合并单元格的值,如下图所示: 合并单元 ...

  3. iOS - 跳转到系统设置

    一.跳转到自己应用设置(iOS8以上系统推荐使用) //跳转到自己应用干的设置配置页(如 定位.相机.相册 这些隐私配置) [[UIApplication sharedApplication] ope ...

  4. RecyclerView+SwpieRefreshLayout（转载）

    开源库BaseRecyclerViewAdapterHelperhttp://blog.csdn.net/xiangzhihong8/article/details/52138669http://ww ...

  5. kafka---->kafka connect的使用(一)

    这里面介绍一下kafka connect的一些使用. kafka connect的使用 一.在config目录下面复制一个file-srouce.properties并且修改内容 huhx@gohuh ...

  6. python根据字符串导入模块

    问题: path = "auth.my_auth.AUTH" # 根据path实例化AUTH类 解决: path = "auth.my_auth.AUTH" i ...

  7. C - Friends and Subsequences

    Mike and !Mike are old childhood rivals, they are opposite in everything they do, except programming ...

  8. socket.io 中文文档

    Socket.io是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用.它会自动根据浏览器从WebSocket.AJAX长轮 ...

  9. Java高并发系列 — AQS

    只懂volatile和CAS是不是可以无视concurrent包了呢,发现一个好链接,继续死磕,第一日: 首先,我承认很多时候要去看源码才能更好搞懂一些事,但如果站在巨人肩膀上呢?有了大概思想源码看还 ...

  10. poj2109 【贪心】

    Current work in cryptography involves (among other things) large prime numbers and computing powers ...