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;
  }
  

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

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

  table和table-row的宽度调整为table-cell的宽度（500px），但是若设置table-cell宽度大于table外部容器container的宽度（如1200px），此时table会反过来约束table-row和table-cell将其宽度限制为1000px（table不显式设置宽度时，其宽度不会超过外部容器宽度）。

  在table显式设置宽度的情况下，无论内部的table-cell是否设置宽度，宽度是否大于table的宽度，table-row和table-cell的实际宽度都等于table的宽度。但是有一种情况例外，即当table宽度设置为小于table-cell中文本的最小宽度时，如：

  #table {
      display: table;
      table-layout: auto;
      width: 1px;
  }
  

  此时table、table-row和table-cell三者的宽度并不会缩小到1px,而是会保持table-cell中文本的最小宽度：

table-cell中文本最小宽度

• 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），并统一所有单元格的高度等于该高度。

所有table-cell高度相等

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;
}

效果为：

各table-cell平分table的宽度

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

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

vertical-align控制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实现垂直居中

应用二：自适应两栏布局

使用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;
}

布局效果为：

table-cell实现等高布局

应用四：等宽布局

<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;
}

布局效果为：

table-cell实现等宽布局