DIV+CSS的布局已經(jīng)讓表格布局幾乎很少用到，除非表格語義性很強(qiáng)的情況。

display：table解決了一部分需要使用表格特性但又不需要表格語義的情況，

尤其是DIV+CSS很不方便解決的問題，比如以下兩種情況：

一、父元素寬度固定，想讓若干個(gè)子元素平分寬度

通常的做法是手動(dòng)設(shè)置子元素的寬度，如果設(shè)置百分?jǐn)?shù)不一定能整除，設(shè)置具體的數(shù)值又限制了父元素的寬度固定，很煩。

可以使用display：table來解決：

.parent{display: table; width: 1000px;} .son{display: table-cell;}

如此一來，就算是三個(gè)或者六個(gè)元素也可以很方便均分父元素的寬度了。

二、塊級子元素垂直居中

想讓一個(gè)div或p在父元素中垂直居中一直是很多人解決不了的問題（注意直接對塊級元素使用vertical-align是不能解決這個(gè)問題的，vertical-align定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊），同樣可以使用display：table方便解決：

.parent {display: table;} .son {display: table-cell; vertical-align: middle;}

將塊級子元素的display設(shè)置為table-cell之后再使用vertical-align就可以了。

注意：雖然display：table解決了避免使用表格的問題，但有幾個(gè)需要注意的：

（1）display: table時(shí)padding會(huì)失效
（2）display: table-row時(shí)margin、padding同時(shí)失效 （3）display: table-cell時(shí)margin會(huì)失效

轉(zhuǎn)載于:https://www.cnblogs.com/stephen666/p/6995388.html

總結(jié)

以上是生活随笔為你收集整理的display：table的几个用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。