display: table-cell知识点总结

display: table-cell知识点总结

1. 匿名表格元素创建

CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。
这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。
所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合
table/inline-table、table-row、table- cell的三层嵌套关系。

也就是说如下代码：

<div id="table-cell">content</div>

#table-cell {
    display: table-cell;
}

等价于

<div id="table">
    <div id="table-row">
        <div id="table-cell">content</div>
    </div>
</div>

#table {
    display: table;
    table-layout: auto;
}

#table-row {
    display: table-row;
}

#table-cell {
    display: table-cell;
}

只不过外层的table和table-row是由浏览器默认创建的，称为匿名元素；反之，如果有：

<div id="table">
    <p>paragraph1</p>
    <p>paragraph2</p>
</div>

#table {
    display: table;
}

则等价于：

<div id="table">
    <div id="table-row">
        <div id="table-cell">
            <p>paragraph1</p>
            <p>paragraph2</p>
        </div>
    </div>
</div>

#table {
    display: table;
}

#table-row {
    display: table-row;
}

#table-cell {
    display: table-cell;
}

这次，浏览器默认创建了table-row和table-cell两个匿名元素。

2. table-cell和table-row设置margin无效

对于设置为display: table-cell或display: table-row的元素，对其设置margin将不会产生任何作用。

3. table-row设置width无效

table-row作为table和table-cell的中间元素，对其设置width属性将不会产生任何作用。table-row元素的宽度由内部的table-cell或外部的table决定。

4. table、table-row、table-cell之间宽度相互作用关系

由于table可以设置为table-layout: auto或table-layout: fixed，而两者对于table、table-row和table-cell在不同情况下的宽度取值具有不同影响，所以对它们进行分类描述：

• table-layout: auto（默认值）
  假设有如下代码：

<div id="container">
    <div id="table">
        <div id="table-row">
            <div id="table-cell">content</div>
        </div>
    </div>
</div>

#container {
    width: 1000px;
}

#table {
    display: table;
    table-layout: auto;
}

#table-row {
    display: table-row;
}

#table-cell {
    display: table-cell;
}

1. 在table不显式设置宽度的情况下，由于table、table-row和table-cell具有包裹性，所以三者的宽度等于内部content的宽度
2. 当table-cell设置宽度时，如：

#table-cell {
    display: table-cell;
    width: 500px;
}

此时table、table-row和table-cell三者的宽度和如果加起来小于祖先容器的宽度（本例子中爷爷容器宽度为1000px）那么宽度为各自设置的宽度，如果三者宽度和大于祖先容器设置的宽度，那么三者宽度会按设置比例缩小

• table-layout: fixed
  假设代码与table-layout: auto情况下一致，只是对table做出修改：

#table {
    display: table;
    table-layout: fixed;
}  

• 在table不显式设置宽度的情况下
  • 与table-layout: auto的情况完全一致
• 在table显式设置宽度的情况下
  • 若table-cell不显式设置宽度，则table、table-row和table-cell三者的宽度相等，都等于table设置宽度（包括table宽度小于table-cell中文本最小宽度的情况）
  • 若table-cell显式设置宽度
    • 当table宽度大于table-cell时，table、table-row和table-cell三者宽度等于table宽度
    • 当table宽度小于table-cell时，table、table-row和table-cell三者宽度等于table-cell宽度

5. 位于同一table-row下的所有table-cell高度相等

假设有如下代码：

<div class="table-cell" id="cell1">cell1</div>
<div class="table-cell" id="cell2">cell2</div>
<div class="table-cell" id="cell3">cell3</div>
<div class="table-cell" id="cell4">cell4</div>

.table-cell {
    display: table-cell;
}

#cell1 {
    height: 50px;
}

#cell2 {
    height: 60px;
}

#cell3 {
    height: 80px;
}

#cell4 {
    height: 100px;
}

由于cell1、cell2、cell3、cell4会被包含在浏览器默认创建的同一table-row下，则最终该table-row的高度会等于所有单元格中最高元素的高度（即100px），并统一所有单元格的高度等于该高度。

6. table-layout: fixed令各table-cell宽度等分

当table显式设置宽度，设置table-layout为fixed且table-cell不设置宽度时，每行中的所有table-cell将平分table的宽度：

<div id="table">
    <div class="table-cell">cell1</div>
    <div class="table-cell">cell2</div>
    <div class="table-cell">cell3</div>
    <div class="table-cell">cell4</div>
</div>

#table {
    display: table;
    table-layout: fixed;
    width: 500px;
}

.table-cell {
    display: table-cell;
}

效果为：

7. vertical-align在table-cell上的作用

vertical-align一般作用在内联元素上，主要用于内联元素间在垂直方向上的对齐。不过，vertical-align同样也可以作用于table-cell元素，目的是为了指定table-cell中的内容在垂直方向上相对于table-cell的对齐关系：

关于vertical-align的更多信息，可参考：mdn vertical-align.

8. display: table-cell在布局上的应用

应用一：元素垂直居中

使用table-cell搭配vertical-align可以十分简单地完成元素垂直居中：

<div id="box">
    <div id="content">content goes here...</div>
</div>

#box {
    display: table-cell;
    width: 200px;
    height: 100px;
    vertical-align: middle;
}

应用二：自适应两栏布局

使用table-cell完成“左侧宽度固定，右侧宽度自适应”的两栏布局：

<div id="container">
    <div id="left">content goes here...</div>
    <div id="right">content goes here...</div>
</div>

#left {
    float: left;
    width: 150px;
}

#right {
    display: table-cell;
    width: 9999px;
}

#container {
    overflow: auto;
}

应用三：等高布局

<div id=container>
    <div id="left">content goes here...</div>
    <div id="right">content goes here...</div>
</div>

#container {
    display: table-row;
}

#left,
#right {
    display: table-cell;
    width: 100px;
}

布局效果为：

应用四：等宽布局

<div id="container">
    <div class="cell">content goes here...</div>
    <div class="cell">content goes here...</div>
    <div class="cell">content goes here...</div>
</div>

#container {
    display: table;
    table-layout: fixed;
    width: 450px;
}

.cell {
    display: table-cell;
}

布局效果为：