CSS display:table

最新推荐文章于 2024-08-25 21:15:04 发布

转载最新推荐文章于 2024-08-25 21:15:04 发布 · 2.4k 阅读

CSS 专栏收录该内容

24 篇文章

订阅专栏

博客介绍了display:table-cell的相关知识。在概念上，它可在div等标签中实现表格效果。应用方面，能让块级子元素垂直居中，还可使子元素平分固定宽度父元素。同时也给出注意点，如部分情况无效，且不要与改变布局属性同时使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概念

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;
	border: 1px solid red;
	display: table;
}
.box span{
	display: table-cell;
	vertical-align: middle; //垂直居中
	text-align: center; //水平居中
}

<div class="box">
	<span>我是大好人</span>
</div>

在这里插入图片描述
2、父级元素宽度固定，子元素平分宽度(优点不用给子元素设置%)

.box{
	width: 300px;
	height: 200px;
	border: 1px solid red;
	display: table;
}
.box div{
	display: table-cell;
}

<div class="box">
	<div style="background-color: pink">1</div>
	<div style="background-color: blue">2</div>
	<div style="background-color: red">3</div>
</div>

在这里插入图片描述

注意

display:table：padding无效
display:table-row：padding，margin无效
display:table-cell：margin无效
display:table-cell：不要与float,position:absolute等改变布局的属性同时使用，作用会被破坏
参考文档：
https://blog.youkuaiyun.com/Bessicxie/article/details/78572424
https://www.zhangxinxu.com/wordpress/2010/10/我所知道的几种displaytable-cell的应用/
https://www.cnblogs.com/yuxiaobai/p/9290491.html