基于display显示的表格

最新推荐文章于 2023-07-27 21:16:25 发布

chen106106

最新推荐文章于 2023-07-27 21:16:25 发布

阅读量1k

点赞数

分类专栏： CSS学习笔记文章标签： css table display cell

本文链接：https://blog.csdn.net/chen106106/article/details/84378459

版权

CSS学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

使用CSS表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>基于display的 css table </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
  .container{margin:50px auto 0;text-align:center;width:300px;}
#table {display: table;border-collapse:collapse;width:200px; table-layout:fixed;background-color:pink;}
.row {display: table-row;}
.row:nth-child(2n){ background-color:#FE4902;}
.row:nth-child(2n+1){ background-color:orange;}
.odd{background-color:#FE4902;}
.even{background-color:orange;}
.cell {display: table-cell;border:1px solid #1FA834;padding:10px;width:10px;height:auto;}
.caption{display:table-caption;margin:8px auto;}
.colgroup{display:table-row;}
.col{display:table-cell;border:1px solid #1FA834;padding:10px;width:100px;height:auto;font-weight:bold;}
.wrapper{ white-space: nowrap;width: 10px;overflow: hidden;text-overflow: ellipsis;} /*让表格里面溢出的内容以...的形式显示*/
  </style>
 </head>

 <body>
	
	<div class="container">
	 <div id="table">
		
	  <div class="caption">基于display显示的table</div>
	  
	  <div class="colgroup">
		<span class="col">username</span>
		<span class="col">email</span>
		<span class="col">age</span>
	  </div>
	  <div class="row even">
		<span class="cell">John</span>
		<span class="cell">132455@qq.com</span>
		<span class="cell">35</span>
	  </div>
	  <div class="row odd" >
		<span class="cell">Nick</span>
		<span class="cell wrapper">Joshtest@gmail.com</span>
		<span class="cell">28</span>
	  </div>
	  <div class="row even">
		<span class="cell">Lucy</span>
		<span class="cell">joo@gmail.com</span>
		 <span class="cell">30</span>
	  </div>
	</div>
	</div>
 </body>
</html>

如果想看到上面的效果图，需要在支持display：table的浏览器中打开。

不仅仅是可以用来以表格呈现数据，还可以用它来布局。我们不需要担心浮动的问题。

具体可以查看下面的文章地址：基于display:table的CSS布局

chen106106

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于display显示的表格

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

扫一扫

专栏目录