CSS属性display:table的表格布局的使用

最新推荐文章于 2024-08-25 21:15:04 发布
最新推荐文章于 2024-08-25 21:15:04 发布
阅读量2.1w 收藏 41
点赞数 7
分类专栏： 【HTML5+CSS3点滴知识 】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_17775997/article/details/56284567
版权

项目改造中遇到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 style="background: paleturquoise;">
     <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  style="background: paleturquoise;">
 
 <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>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* { margin:0; border:0; padding:0;}
			.table { display:table; background:#f00;width:500px;margin-left:200px; }
			.t_row { display:table-caption; border:1px solid #f00; height:100px; background:#00f;}
			.t_cell { display:table-cell; border:1px solid #f00; height:100px;  background:#0f0 }
		</style>
	</head>
	<body>
		<div class="table">
		  <div class="t_row">一列</div>
		  <div class="t_cell" style="text-align: center;vertical-align: middle;">两列</div>
		  <div class="t_cell">两列</div>
		</div>
		<div class="table">
		  <div class="t_row">一列</div>
		  <div class="t_cell">三列</div>
		  <div class="t_cell">三列</div>
		  <div class="t_cell">三列</div>
		</div>
		<div class="table">
		  <div class="t_row">一列</div>
		  <div class="t_cell">四列</div>
		  <div class="t_cell">四列</div>
		  <div class="t_cell">四列</div>
		  <div class="t_cell">四列</div>
		</div>
	</body>
</html>



barnett_y
关注
专栏目录
基于CSS属性display:table的表格布局的使用
weixin_30321449的博客
03-23 1718
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的display:table的DIV，然后在嵌套的表格DIV内部通过控制行列数和行列的高度，实现单元格合并。个人建议全新实现使用<table> HTML标签即...
css Table布局-display:table
qq_35396397的博客
11-22 765
使用表格布局一直是一个敏感的主题。一般情况下，Web开发人员考虑基于表格布局是禁忌。 尽管反对的理由看起来证据很充分，但是大多数开发者除了谴责基于表格的布局，都无法提供完善的使用场景。 “表格不好。” 从早期反对HTML Table（<table>标签）开始这种势头就非常强劲。 几代开发者被成功洗脑，根深蒂固的认为：任何使用表格都是邪恶的。 诚然，我也是避免使用...
基于display:table的CSS布局
webLover
09-18 253
转自：http://ued.alipay.com/2008/10/%E5%9F%BA%E4%BA%8Edisplaytable%E7%9A%84css%E5%B8%83%E5%B1%80/ 应原书编辑要求，先在文章顶部给出链接：《Everything You Know About CSS Is Wrong》 http://www.sitepoint.com/books/csswrong1/...
CSS的table显示值：布局艺术的幕后推手
最新发布
2402_85758936的博客
08-25 755
CSS（层叠样式表）是构建网页布局的核心技术之一。是CSS中一个强大的属性，它允许元素表现得像HTML表格一样。本文将深入探讨table显示值如何影响元素的布局，包括其子元素如何按照table-row和table-cell的方式进行布局，并提供实际的代码示例来展示其效果。将元素的display属性设置为table会使得该元素表现得像一个HTML表格。它允许我们使用表格的布局特性，但不需要使用实际的标签。
css3的display:table布局
热门推荐
Bessicxie的博客
11-19 3万+
当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。 网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。display:table=>相当于“table”标签； display:table-row=>相当于“tr”标签； displa
css样式学习：display:table
kesilll的博客
04-12 449
display:table的几个用法 父元素宽度固定，想让若干个子元素平分宽度 通常的做法是手动设置子元素的宽度，如果设置百分数不一定能整除，设置具体的数值又限制了父元素的宽度固定，很烦。可以使用display：table来解决： .parent{display: table; width: 1000px;} .son{display: table-cell;} 块级子元素垂直...
display：table的几个用法
weixin_30387663的博客
06-12 499
DIV+CSS的布局已经让表格布局几乎很少用到，除非表格语义性很强的情况。 display：table解决了一部分需要使用表格特性但又不需要表格语义的情况， 尤其是DIV+CSS很不方便解决的问题，比如以下两种情况： 一、父元素宽度固定，想让若干个子元素平分宽度 通常的做法是手动设置子元素的宽度，如果设置百分数不一定能整除，设置具体的数值又限制了父元素的宽度固定，很烦。 可以使...
CSS display:table
Bambi12的博客
03-22 2400
概念 display:table可以在div等标签中实现表格的效果 display:table ：相当于table标签 display:table-row ：相当于tr标签 display:table-cell ：相当于td标签 应用 1、利用display:table和display:table-cell让块级子元素垂直居中 .box{ width: 200px; height: 200px...
CSS display属性的table表格布局
01-19
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的...
关于CSS中的display:table-cell使用技巧的几种应用
09-25
- 其他CSS属性如`float`和`position: absolute`可能会破坏`display: table-cell`的效果，因此在设计时应避免同时使用这些属性。 2. **display: table-cell与大小不固定元素的垂直居中** - 通过`display: table-...
CSS 之 display:table
ssisse的博客
06-08 547
使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。 在深入了解这种方法之前，让我们先来写份HTML
display:table布局
黑猫几绛的博客
09-04 318
今天在看到学长在项目中使用了table布局，我以前没了解过这个，感觉很神奇，我布局一般是flex一把梭，但是有些时候使用table这个骚操作会有奇妙结果。需要提前知道的是： - display: table时padding会失效- display: table-cell时margin会失效 使用情况一：父元素宽度固定，让子元素平分宽度 放在以前我会给父级元素设置display:flex，然后为子元素设置宽度，这里用新学的table来处理，父元素作为t...
display: table布局
flowRight的博客
07-17 344
display的table和table-cell一般情况应用场景 1 顶部高度固定，剩余高度自适应 <div class="table"> <div class="top">头部</div> <div class="content"> 内容区 </div> </d...
display：table 表格布局
weixin_30507481的博客
01-27 111
table 布局最大的特点 1、同行等高 2、宽度自动调节 那么table-cell是不是具备这个特点呢？答案是yes，为什么呢？css中有一个有意思的规则“创建匿名表格元素”。 拿table-cell来扯，就是，当某个元素被设置为display:table-cell的时候，如果她的父节点不是display：table-row，爷爷节点不是display:table，这个儿子生...
CSS的display：table
weixin_30768175的博客
05-08 346
　　好久都没有写博客了，似乎总是觉得少了些什么…… 刚好最近在工作中遇到了一个新的东西display：table，这个也是css的布局的一种，而且又是display的，之前已经写过了display的flex，grid，现在又来一个table，是不是觉得有点多呢，哈哈，没关系，不怕多，就怕不够你用，希望你们之后在写网页的时候能够根据不同的结构选择最适合最方便最顺手的布局方式，不仅可以i提高效率还可...
CSS 之 table 表格布局
weixin_45092437的博客
10-09 1万+
除了使用HTML的table元素外，我们还可以通过display: table/inline-table;设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中table系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值