http://www.cnblogs.com/lee90/p/6602478.html

html:

1、當設置display：table;時，table的padding設置會失效。【可自己測試一下】

.table {

display: table;

margin: 5px;

width: 1000px;

border:1px solid red;

}

2、當設置display：table-row;時，margin和padding設置會失效。這里我進行了設置，可以看出是沒有效果的。

.row?{

display:?table-row;

padding:100px;

margin:100px;

}

3、當設置display：table-cell;時，margin設置會失效。這里我進行了設置，可以看出是沒有效果的。

.cell {

display: table-cell;

padding: 10px;

vertical-align: middle;/*定義行內元素垂直對齊*/

height: 300px;

border:1px solid green;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

4、認識了上面的設置的作用和注意點以后，我們可以發現可以通過display:table-cell和vertical-align:middle;來進行垂直居中設置的,也是運用了cell時，vertical-align屬性生效作用。

設置float或position會對默認布局造成破壞，可以考慮為之增加一個父div定義float等屬性。

總結

以上是生活随笔為你收集整理的table row设置cell的html,css中display设置为table、table-row、table-cell后的作用及其注意点...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。