display:table;使用小结

最新推荐文章于 2024-09-23 13:16:35 发布
最新推荐文章于 2024-09-23 13:16:35 发布
阅读量2.2w 收藏 84
点赞数 13
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Doulvme/article/details/79015264
版权

IE8支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。

一、为什么不用table元素？

目前，在大多数开发环境中已经不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table元素呢？

  1. 用DIV+CSS编写出来的文件k数比用table写出来的要小。
  2. table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示。
  3. 非表格内容用table来装，不符合标签语义化要求，不利于SEO。
  4. table的嵌套性太多，用DIV代码会比较简洁。
 .......
二、要是想要一个表格的布局方式怎么办？

可以用display:table来解决。
display:table系列几乎是和table系的元素相对应的，请看下表：

table(类似<table>)此元素会作为块级表格来显示，表格前后带有换行符。
inline-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>)此元素会作为一个表格标题来显示。













三、如何使用display:table?

1、元素两端对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内容不固定，文字居中显示</title>
		<style>
			*{
				padding: 0;
				margin: 0px;
			}
			body{
				font-family: "微软雅黑", arial;
				font-size: 14px;
			}
			/*两端对齐*/
			.wrap{width: 80%;margin: 0 auto;}
			.content{
				display: table;
				width: 100%;
				min-width: 320px;
				max-width: 1000px;
				padding: 15px 5px;
				margin: 10px auto;
				border: 1px solid #CCCCCC;
			}
			.content-box{
				display: inline-block;
				width: 100px;
				height: 100px;
				text-align: center;
				font-size: 40px;
				border: 1px solid #337AB7;
			}
			.left,.right{
				display: table-cell;
				*display: inline-block;
				zoom: 1;
			}
			.right{
				text-align: right;
				background: lightgray;
			}
			.left{
				text-align: left;
				background: lavender;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<p>元素两端对齐</p>
			<div class="content">
				<div class="left">
					<div class="content-box">B box</div>
				</div>
				<div class="right">
					<div class="content-box">A box</div>
				</div>
			</div>
		</div>
		
		
	</body>
</html>
通过设置left、right为display:table-cell；实现两部分的并行排列，运行效果如下：

2、自动平均划分每个小模块，使其一行显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内容不固定，文字居中显示</title>
		<style>
			*{
				padding: 0;
				margin: 0px;
			}
			body{
				font-family: "微软雅黑", arial;
				font-size: 14px;
			}
			/*两端对齐*/
			.wrap{width: 80%;margin: 50px auto 0px;}
			.content{
				display: table;
				width: 100%;
				min-width: 320px;
				max-width: 1000px;
				padding: 15px 5px;
				margin: 10px auto;
				border: 1px solid #CCCCCC;
			}
			
			.content ul{
				display: table;
				width: 100%;
				padding: 0;
				border-right: 1px solid #FEB312;
			}
			.content ul li{
				display: table-cell;
				height: 100px;
				line-height: 100px;
				text-align: center;
				border: 1px solid #FEB312;
				border-right: none;
			}
			
		</style>
	</head>
	<body>
		<div class="wrap">
			<p>自动平均划分每个小模块，使其一行显示</p>
			<p>遇到上面这种布局，一般会用float来做，或者把每个li设置成display:inline-block;来做，
				并且都要给他们设置一个宽度，而且最痛苦的是5个li如果你设置width:20%;他们一定会掉下来，
				如果li都设置成display:table-cell；
				就不会出现这种情况，即使不设置宽度他们也会在一行显示，
				你在加多一行他也不会掉下来，依旧会在一样显示。
			</p>
			<div class="content">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>
		</div>
		
		
	</body>
</html>

遇到上面这种布局，一般会用float来做，或者把每个li设置成display:inline-block;来做，并且都要给他们设置一个宽度，而且最痛苦的是5个li如果你设置width:20%;他们一定会掉下来，如果li都设置成display:table-cell；就不会出现这种情况，即使不设置宽度他们也会在一行显示，你在加多一行他也不会掉下来，依旧会在一样显示。运行结果如下：


3、图片垂直居中与元素/使大小不固定的元素垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内容不固定，文字居中显示</title>
		<style>
			*{
				padding: 0;
				margin: 0px;
			}
			body{
				font-family: "微软雅黑", arial;
				font-size: 14px;
			}
			/*两端对齐*/
			.wrap{width: 80%;margin: 50px auto 0px;}
			.content{
				display: table;
				width: 100%;
				height: 300px;
				min-width: 320px;
				max-width: 1000px;
				margin: 10px auto;
				border: 1px solid #CCCCCC;
			}
			.img-box{
				display: table-cell;
				font-size: 0px;
				border: 1px solid red;
				vertical-align: middle;
				text-align: center;
				background: lightblue;
			}
			
		</style>
	</head>
	<body>
		<div class="wrap">
			<p>图片垂直居中与元素</p>
			<div class="content">
				<div class="img-box"><img width="100" src="img/p2.jpg"/></div>
			</div>
		</div>
	</body>
</html>
运行结果如下：

4、两box实现等高对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内容不固定，文字居中显示</title>
		<style>
			*{
				padding: 0;
				margin: 0px;
			}
			body{
				font-family: "微软雅黑", arial;
				font-size: 14px;
			}
			/*两端对齐*/
			.wrap{width: 80%;margin: 50px auto 0px;}
			.content{
				display: table;
				width: 100%;
				min-width: 320px;
				max-width: 1000px;
				margin: 10px auto;
				border: 1px solid #CCCCCC;
			}
			.img-box{
				display: table-cell;
				width: 100px;
				border: 1px solid red;
				vertical-align: middle;
				text-align: center;
				background: #979797;
			}
			
			.text-box{
				margin-left: 20px;
				padding: 10px;
				border: 1px solid #D0D0D0;
			}
			
		</style>
	</head>
	<body>
		<div class="wrap">
			<p>两box实现等高对齐</p>
			<div class="content">
				<div class="img-box"><img width="70" src="img/p2.jpg"/></div>
				<div class="text-box">
					<span>左侧的box的高度始终跟随右侧的box的高度变化而变化</span>
					<p>案例不对右侧的box设置display:table-cell，只对左侧设置，所以就会出现左侧跟随右侧高度变化而变化。</p>
					<p>如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。</p>
				</div>
			</div>
		</div>
	</body>
</html>
左侧的box的高度始终跟随右侧的box的高度变化而变化，案例不对右侧的box设置display:table-cell，只对左侧设置，所以就会出现左侧跟随右侧高度变化而变化。

如果要实现不管两个box哪个高度产生变化另一个就跟随变化，只需要把右侧的box也设置成display:table－cell就可以实现了。运行结果如下：

5、弹性、响应式布局  display实现兼容性的两栏自适应布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内容不固定，文字居中显示</title>
		<style>
			*{
				padding: 0;
				margin: 0px;
			}
			body{
				font-family: "微软雅黑", arial;
				font-size: 14px;
			}
			/*两端对齐*/
			.wrap{width: 80%;margin: 50px auto 0px;}
			.content{
				display: table;
				width: 100%;
				min-width: 320px;
				max-width: 1000px;
				padding: 15px 5px;
				margin: 10px auto;
				border: 1px solid #CCCCCC;
			}
			.left-box{
				float: left;
				margin-right: 10px;
				padding-top: 5px;
			}
			.right-box{
				display: table-cell;
				*display: inline-block;
				*zoom: 1;
				padding: 10px;
				border: 1px solid #CCCCCC;
				margin-right: 10px;
				vertical-align: top;
			}
			
		</style>
	</head>
	<body>
		<div class="wrap">
			<p>弹性、响应式布局  display实现兼容性的两栏自适应布局</p>
			<div class="content">
				<div class="left-box">
					<img width="70" src="img/p2.jpg"/>
				</div>
				<div class="right-box">
					<p>移动端布局因为有display:box这等属性，所以table-cell相对就排不上什么大用场，
						不过在移动端你要用table-cell也不是不可以，根据自己对属性的理解去使用就可以了。</p>
				</div>
			</div>
		</div>
	</body>
</html>

微博评论就是使用的这种布局，运行结果如下：


附：常用的左侧菜单文字上下居中显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字竖直方向居中显示</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.wrapper{
				font-family: "微软雅黑";
				font-size: 14px;
			}
			.left-menu{
				width: 100px;
				height: 100%;
				background: #fcfcfc;	
			}
			.left-menu-list{
				margin-top: 50px;
				list-style: none;
			}
			.left-menu-list .left-menu-item{
				padding: 10px;
				border-bottom: 1px solid #F1F1F1;
				cursor: pointer;
			}
			.left-menu-list .left-menu-item:hover{
				background: #F1F1F1;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<!--通过span   li pading是元素居中-->
			<div class="left-menu">
				<ul class="left-menu-list">
					<li class="left-menu-item">
						<span>热销榜热销榜热销榜热销榜</span>
					</li>
					<li class="left-menu-item">
						<span>优惠</span>
					</li>
					<li class="left-menu-item">
						<span>套餐一</span>
					</li>
					<li class="left-menu-item">
						<span>单点</span>
					</li>
					<li class="left-menu-item">
						<span>饮料</span>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>










soosgo
关注
专栏目录
css Table布局-display:table
qq_35396397的博客
11-22 807
使用表格布局一直是一个敏感的主题。一般情况下，Web开发人员考虑基于表格布局是禁忌。 尽管反对的理由看起来证据很充分，但是大多数开发者除了谴责基于表格的布局，都无法提供完善的使用场景。 “表格不好。” 从早期反对HTML Table（<table>标签）开始这种势头就非常强劲。 几代开发者被成功洗脑，根深蒂固的认为：任何使用表格都是邪恶的。 诚然，我也是避免使用...
关于display:table-cell等表格属性的妙用
weixin_50951384的博客
09-22 2376
是是
HBuilderX：前端开发利器，专攻MOA端项目
最新发布
weixin_42298164的博客
09-23 1464
本文还有配套的精品资源，点击获取 简介：HBuilderX是为MOA端（移动办公应用）设计的高效前端开发软件，提供集成开发环境、智能提示、实时预览、代码格式化、Git集成等特性。它支持项目管理、模板与组件库、性能优化、真机调试、云编译发布，适合响应式布局开发和多平台小程序开发。本文将探讨如何利用HBuilderX的特点和功能，进行MOA端开发，并提供使用教程和最佳实践，以帮...
基于CSS属性display:table的表格布局的使用
weixin_30321449的博客
03-23 1745
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的display:table的DIV，然后在嵌套的表格DIV内部通过控制行列数和行列的高度，实现单元格合并。个人建议全新实现使用<table> HTML标签即...
基于display:table的CSS布局
webLover
09-18 263
转自：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/...
display：table的几个用法
weixin_30387663的博客
06-12 516
DIV+CSS的布局已经让表格布局几乎很少用到，除非表格语义性很强的情况。 display：table解决了一部分需要使用表格特性但又不需要表格语义的情况， 尤其是DIV+CSS很不方便解决的问题，比如以下两种情况： 一、父元素宽度固定，想让若干个子元素平分宽度 通常的做法是手动设置子元素的宽度，如果设置百分数不一定能整除，设置具体的数值又限制了父元素的宽度固定，很烦。 可以使...
display:table的几个妙用：垂直居中、浮动……
weixin_30915275的博客
08-25 1665
一、为什么不用table系表格元素？ 目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？ 1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大 2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也...
css样式学习：display:table
kesilll的博客
04-12 459
display:table的几个用法 父元素宽度固定，想让若干个子元素平分宽度 通常的做法是手动设置子元素的宽度，如果设置百分数不一定能整除，设置具体的数值又限制了父元素的宽度固定，很烦。可以使用display：table来解决： .parent{display: table; width: 1000px;} .son{display: table-cell;} 块级子元素垂直...
什么是重绘和回流?display:none和visibility:hidden的区别
频繁记录
06-14 1976
什么是重绘和回流?display:none和visibility:hidden的区别
关于html水平垂直居中的问题小结
12-03
对于多行文本的垂直居中，可以使用`display: table-cell`和`vertical-align: middle`。然而，这种方法在IE6和IE7中不支持，可以配合`display: table`来解决： ```css .wrap { width: px; height: px; border: ...
css小结：清除float带来的影响
01-08
display: table; clear: both; } ``` 这样，`.clearfix` 类的使用会让`.container` 识别并包含所有的浮动子元素，避免高度塌陷。 2. **使用`overflow: hidden`**：为父元素设置`overflow: hidden` 可以强制...
CSS的display：table
weixin_30768175的博客
05-08 371
　　好久都没有写博客了，似乎总是觉得少了些什么…… 刚好最近在工作中遇到了一个新的东西display：table，这个也是css的布局的一种，而且又是display的，之前已经写过了display的flex，grid，现在又来一个table，是不是觉得有点多呢，哈哈，没关系，不怕多，就怕不够你用，希望你们之后在写网页的时候能够根据不同的结构选择最适合最方便最顺手的布局方式，不仅可以i提高效率还可...
display: table布局的使用
luolvzhou的博客
09-27 9765
很多人对display:table布局很陌生，其实不能算是陌生，而是经常会看见，但却不想去了解和学习，可是有时候面试的时候会碰到，所以又不得不看，其实display:table布局很简单，就是使用css样式，取代<table></table>标签中的一切，来形成一个表格布局。 记住这张表格，然后对应着<table>标签中的一切属性来， 一般来讲表格长啥样？ <table> <thead> <tr> ...
CSS 之 display:table
ssisse的博客
06-08 580
使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。 在深入了解这种方法之前，让我们先来写份HTML
display:table布局
黑猫几绛的博客
09-04 334
今天在看到学长在项目中使用了table布局，我以前没了解过这个，感觉很神奇，我布局一般是flex一把梭，但是有些时候使用table这个骚操作会有奇妙结果。需要提前知道的是： - display: table时padding会失效- display: table-cell时margin会失效 使用情况一：父元素宽度固定，让子元素平分宽度 放在以前我会给父级元素设置display:flex，然后为子元素设置宽度，这里用新学的table来处理，父元素作为t...
html —— table 标签 与 display:table 样式
永远的北极光
04-01 1万+
目录：一、table 相关标签介绍及使用二、div 布局设置display：table一、table 相关标签介绍及使用相关标签按包含关系从大到小排序：table ——&gt; col | colgroup | thead | tbody | tfoot；thead | tbody | tfoot ——&gt; tr；tr ——&gt; th | td；说明：table：重要属性有border（单...
css3的display:table布局
热门推荐
Bessicxie的博客
11-19 3万+
当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。 网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。display:table=>相当于“table”标签； display:table-row=>相当于“tr”标签； displa
display:table的用法
weixin_30794499的博客
03-14 151
目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？ 1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大 2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐...
display: table布局
flowRight的博客
07-17 355
display的table和table-cell一般情况应用场景 1 顶部高度固定，剩余高度自适应 <div class="table"> <div class="top">头部</div> <div class="content"> 内容区 </div> </d...
display:table-cell怎么使用
03-27
display: table-cell属性用于将元素以表格单元格的方式显示，可以在父级元素设置display: table属性后使用。 例如： HTML代码： <div class="table"> <div class="cell">单元格1</div> <div class="cell">单元格2</div> <div class="cell">单元格3</div> </div> CSS代码： .table { display: table; width: 100%; } .cell { display: table-cell; border: 1px solid black; padding: 10px; } 在上面的例子中，父级元素设置了display: table，子元素设置了display: table-cell，实现了将元素以表格单元格的方式显示。同时，通过设置border和padding属性，可以为单元格添加边框和内边距。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值