等宽类表格布局

最新推荐文章于 2021-08-18 19:29:01 发布

weixin_33979363

最新推荐文章于 2021-08-18 19:29:01 发布

阅读量75

点赞数

原文链接：https://juejin.im/post/5a31dcc2f265da43062ac6eb

版权

flex布局，IE10及IE10以上支持，IE10需要加上-ms-

这支持率，很刺激，网站慎用。

display: table-*布局

比table的自动布局渲染效率高多了，而且支持IE8及IE8以上。

<!DOCTYPE html>
<html>
<head>
	<title>dd</title>
	<style type="text/css">
		ul,li{
			margin:0;
			padding:0;
		}
		.container {
  			display: flex;
  			width: 200px;
  			height: 50px;
		}
		.item {
			border:1px solid #000;
		 	flex: 1;
		}
		.table1{
			width: 200px;
			display: table;
  			table-layout: fixed;
		}
		.table1 li{
			border:1px solid #000;
			display: table-cell;
		}
		.table2{
			width: 200px;
		}
		.table2 li{
			border:1px solid #000;
			display: table-cell;
			width: 1%;
		}
		
	</style>
</head>

<body>
<h4>flex</h4>
<div class="container">
	<div class="item">item1</div>
	<div class="item">item2</div>
	<div class="item">item3</div>
</div>

<h4>table1</h4>
<ul class="table1">
	<li>li1</li>
	<li>li2</li>
	<li>li3</li>
	<li>li4</li>
</ul>

<h4>table2</h4>
<ul class="table2">
	<li>li1</li>
	<li>li2</li>
	<li>li3</li>
	<li>li4</li>
</ul>

</body>
</html>
复制代码