1. 匿名表格元素創(chuàng)建

CSS2.1表格模型中的元素，可能不會(huì)全部包含在除HTML之外的文檔語(yǔ)言中。這時(shí)，那些“丟失”的元素會(huì)被模擬出來，從而使得表格模型能夠正常工作。所有的表格元素將會(huì)自動(dòng)在自身周圍生成所需的匿名table對(duì)象，使其符合table/inline-table、table-row、table- cell的三層嵌套關(guān)系。

也就是說如下代碼：

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

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

等價(jià)于

<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是由瀏覽器默認(rèn)創(chuàng)建的，稱為匿名元素；反之，如果有：

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

#table {
    display: table;
}

則等價(jià)于：

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

這次，瀏覽器默認(rèn)創(chuàng)建了table-row和table-cell兩個(gè)匿名元素。

2. table-cell和table-row設(shè)置margin無(wú)效

對(duì)于設(shè)置為display: table-cell或display: table-row的元素，對(duì)其設(shè)置margin將不會(huì)產(chǎn)生任何作用。

3. table-row設(shè)置width無(wú)效

table-row作為table和table-cell的中間元素，對(duì)其設(shè)置width屬性將不會(huì)產(chǎn)生任何作用。table-row元素的寬度由內(nèi)部的table-cell或外部的table決定。

4. table、table-row、table-cell之間寬度相互作用關(guān)系

由于table可以設(shè)置為table-layout: auto或table-layout: fixed，而兩者對(duì)于table、table-row和table-cell在不同情況下的寬度取值具有不同影響，所以對(duì)它們進(jìn)行分類描述：

• table-layout: auto（默認(rèn)值）
  假設(shè)有如下代碼：

  <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不顯式設(shè)置寬度的情況下，由于table、table-row和table-cell具有包裹性，所以三者的寬度等于內(nèi)部content的寬度；當(dāng)table-cell設(shè)置寬度時(shí)，如：

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

  table和table-row的寬度調(diào)整為table-cell的寬度（500px），但是若設(shè)置table-cell寬度大于table外部容器container的寬度（如1200px），此時(shí)table會(huì)反過來約束table-row和table-cell將其寬度限制為1000px（table不顯式設(shè)置寬度時(shí)，其寬度不會(huì)超過外部容器寬度）。

  在table顯式設(shè)置寬度的情況下，無(wú)論內(nèi)部的table-cell是否設(shè)置寬度，寬度是否大于table的寬度，table-row和table-cell的實(shí)際寬度都等于table的寬度。但是有一種情況例外，即當(dāng)table寬度設(shè)置為小于table-cell中文本的最小寬度時(shí)，如：

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

  此時(shí)table、table-row和table-cell三者的寬度并不會(huì)縮小到1px,而是會(huì)保持table-cell中文本的最小寬度：

table-cell中文本最小寬度

• table-layout: fixed
  假設(shè)代碼與table-layout: auto情況下一致，只是對(duì)table做出修改：

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

  在table不顯式設(shè)置寬度的情況下，與table-layout: auto的情況完全一致。
  在table顯式設(shè)置寬度的情況下，若table-cell不顯式設(shè)置寬度，則table、table-row和table-cell三者的寬度相等，都等于table設(shè)置寬度（包括table寬度小于table-cell中文本最小寬度的情況）；若table-cell顯式設(shè)置寬度，當(dāng)table寬度大于table-cell時(shí)，table、table-row和table-cell三者寬度等于table寬度；當(dāng)table寬度小于table-cell時(shí)，table、table-row和table-cell三者寬度等于table-cell寬度。

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

假設(shè)有如下代碼：

<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會(huì)被包含在瀏覽器默認(rèn)創(chuàng)建的同一table-row下，則最終該table-row的高度會(huì)等于所有單元格中最高元素的高度（即100px），并統(tǒng)一所有單元格的高度等于該高度。

所有table-cell高度相等

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

當(dāng)table顯式設(shè)置寬度，設(shè)置table-layout為fixed且table-cell不設(shè)置寬度時(shí)，每行中的所有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一般作用在內(nèi)聯(lián)元素上，主要用于內(nèi)聯(lián)元素間在垂直方向上的對(duì)齊。不過，vertical-align同樣也可以作用于table-cell元素，目的是為了指定table-cell中的內(nèi)容在垂直方向上相對(duì)于table-cell的對(duì)齊關(guān)系：

vertical-align控制table-cell內(nèi)容垂直對(duì)齊

關(guān)于vertical-align的更多信息，可參考：mdn vertical-align.

8. display: table-cell在布局上的應(yīng)用

應(yīng)用一：元素垂直居中

使用table-cell搭配vertical-align可以十分簡(jiǎn)單地完成元素垂直居中：

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

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

table-cell實(shí)現(xiàn)垂直居中

應(yīng)用二：自適應(yīng)兩欄布局

使用table-cell完成“左側(cè)寬度固定，右側(cè)寬度自適應(yīng)”的兩欄布局：

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

應(yīng)用三：等高布局

<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實(shí)現(xiàn)等高布局

應(yīng)用四：等寬布局

<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實(shí)現(xiàn)等寬布局