display:table布局总结

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1. table布局方式

2. table布局实际应用

效果:

代码:

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*CSS Table*/
.table { display: table; }
.table-fixed { table-layout: fixed; }
.table-row { display: table-row; }
.table-cell { display: table-cell; }
.table-colgroup { display: table-column-group; }
.table-caption { display: table-caption; }
.table-col { display: table-column; }
.table-body { display: table-row-group; }
.table-header { display: table-header-group; }
.table-footer { display: table-footer-group; }
.table-vt { vertical-align: top; }
.table-vm { vertical-align: middle; }
.table-vb { vertical-align: bottom; }
/*CSS Table*/
html,
body { height: 100%;margin: 0; padding: 0; background: #333;}
div.demo1 { width: 100%;height: 200px; }
.box1 { background: #6D5CAE; }
.box2 { background: #48B0F7; }
.box3 { background: #10CFBD; }
h3 { padding-left: 20px;color: #fff; }
.demo2 { width: 400px;height: 300px;}
.demo2 div.table-header-group {padding: 5px 20px;background: #10CFBD;}
.demo2 .main {height: 100%;background: #48B0F7;}
.demo2 div.table-footer-group {padding: 5px 20px;background: #10CFBD;}
.demo3 {width: 400px;height: 300px;background: #10CFBD;}
.demo4 {width: 400px;height: 300px;background: #10CFBD;text-align: center;}
.center-box {width: 100px;height:100px;background: #6D5CAE;display: inline-block;}
.header{font-size:30px;} /*列表布局，等空隙*/
.grid {
display: table;
border-spacing: 4px;
}
.row {
display: table-row;
}
.image {
display: table-cell;
width: 240px;
height: 300px;
background-color: lightsalmon;
vertical-align: top;
text-align: center;
}
</style>
</head><body>
<h3>子容器自动平分宽度(即使设置宽度，也会进行自动等分，自适应父容器的宽度)</h3>
<div class="table demo1">
<div class="box1 table-cell">1</div>
<div class="box2 table-cell">2</div>
<div class="box3 table-cell">3</div>
</div> <h3>垂直三行，中间自适应</h3>
<div class="table demo2">
<div class="header table-header-group">Table Header</div>
<div class="main table-row">自动占满剩余空间</div>
<div class="table-footer-group">Table Footer</div>
</div> <h3>垂直居中对齐</h3>
<div class="table demo3">
<div class="table-cell table-vm">
<div class="center-box">123</div>
</div>
</div> <h3>水平居中对齐</h3>
<div class="demo4" style="text-align:left;">
<div class="table" style="margin:0 auto">
<div class="center-box">123</div>
</div>
</div> <h3>水平居中对齐2</h3>
<div class="demo4" style="text-align:left;">
<span class="center-box table" style="margin:0 auto">123345678</span>
</div> <h3>列表布局，border-spacing实现等空隙</h3>
<div class="grid">
<div class="row">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
<div class="row">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</div>
</body></html>

3. table布局其他应用

1. 实现两端对齐布局，使用两个table-cell，分别text-align:left和text-align:right，由于要额外套两个容器，所以不是较好的方法
2. 实现等高布局，具体可以参考等高布局
3. 实现两栏自适应布局，具体可以参考自适应布局

4. table布局的注意点

1. display: table时padding会失效
2. display: table-row时margin、padding同时失效
3. display: table-cell时margin会失效，padding有效，高度有效
4. display: table-cell时float, position:absolute会失效，不用同时使用

参考：http://ghmagical.com/article/page/id/s1x7vzL6Z2Sz
https://blog.csdn.net/Xiaotongbiji/article/details/79851288
https://blog.csdn.net/Bessicxie/article/details/78572424
https://blog.csdn.net/Doulvme/article/details/79015264
https://blog.csdn.net/huangbaokang/article/details/82183084