display：table的⽤法
⽬前，在⼤多数开发环境中，已经基本不⽤table元素来做⽹页布局了，取⽽代之的是div+css，那么为什么不⽤table系表格元素呢？
1、⽤DIV+CSS编写出来的⽂件k数⽐⽤table写出来的要⼩，不信你在页⾯中放1000个table和1000个div⽐⽐看哪个⽂件⼤
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的应⽤场景也是⽐较⼴泛的，Google地图在搜索路线时，左侧的路线详情就是⽤的display:table来实现的。
1.div模拟表格：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>模拟表格</title>
</head>
<body>
<style type="text/css" rel="stylesheet">
.table {
display: table;
border: 1px solid #cccccc;
margin: 5px;
/*display: table时padding会失效*/
}
.row {
display: table-row;
border: 1px solid #cccccc;
/*display: table-row时margin、padding同时失效*/
}
.cell {
display: table-cell;
border: 1px solid #cccccc;
padding: 5px;
/*display: table-cell时margin会失效*/
}
</style>
<div class="table">
<div class="row">
<div class="cell">张三</div>
<div class="cell">李四</div>
<div class="cell">王五</div>
</div>
<div class="row">
<div class="cell">张三</div>
<div class="cell">李四</div>
<div class="cell">王五</div>
</div>
</div>
</body>
</html>
2.让块级标签实现⾏内效果，即浮动⾄同⼀横轴，并实现等⾼效果
table表格中的单元格最⼤的特点之⼀就是同⼀⾏列表元素都等⾼。所以，很多时候，我们需要等⾼布局的时候，就可以借助display:table-cell属性。说到table-cell的布局，不得不说⼀下“匿名表格元素创建规则”：
CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的⽂档语⾔中。这时，那些“丢失”的元
素会被模拟出来，从⽽使得表格模型能够正常⼯作。所有的表格元素将会⾃动在⾃⾝周围⽣成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。
举个例⼦吧，如果我们为元素使⽤“display:table-cell;”属性，⽽不将其⽗容器设置为“display:table-row;”属性，浏览器会默认创建出⼀个表格⾏，就好像⽂档中真的存在⼀个被声明的表格⾏⼀样。
html表格元素<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display:table实现浮动效果</title>
</head>
<body>
<style type="text/css" rel="stylesheet">
.table {
display: table;
margin: 5px;
width: 1000px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 10px;
background-color: red;
}
</style>
<div class="table">
<div class="row">
<div class="cell">内容内容内容内容内容内内容内</div>
<div class="cell">内容内容内容内容内容内容内容内容内容</div>
<div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</div>
</div>
</body>
</html>
上例中w可以不要，效果⼀样
3.结合vetical-align实现块级元素垂直居中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。