CSS 中「display: table-column」的真正目的是什麼？

解開CSS「display: table-column」之謎

對HTML 和CSS 屬性的探索常常會帶來有趣的問題。當使用神秘的「display: table-column」聲明實作 CSS 基於表格的佈局時，就會出現這樣的一個查詢。儘管它很有吸引力，但這個屬性有一個相當特定的用途，如果不能正確理解，可能會導致令人困惑的結果。

背景：CSS 表模型

CSS 表model 是一個複雜的系統，大量借鑒了 HTML 表模型。在此模型中，表格由行和列組成，單元格佔據行和列的每個交叉點。雖然單元格是行的直接後代，但它們與列沒有直接關係。

「display: table-column」的目的

與普遍的看法相反，「 display: table-column」屬性不提供建立柱狀佈局的方法。其唯一目的是定義專門應用於表格行中的儲存格的屬性。換句話說，它允許我們根據特定單元格在行中的位置指定背景顏色或字體大小等特徵。

但是，要注意的是，表格結構與傳統的表格結構保持不變。 HTML。欄位不直接包含內容；相反，它們僅作為影響行內單元格佈局的邏輯結構而存在。

說明性範例

考慮以下HTML 和CSS 程式碼：

<code class="html"><section>
  <div id="colLeft">
    <div id="row1">
      <div id="cell1">AAA</div>
    </div>
    <div id="row2">
      <div id="cell2">BBB</div>
    </div>
  </div>
  <div id="colRight">
    <div id="row3">
      <div id="cell3">CCC</div>
    </div>
  </div>
</section></code>

<code class="css">section {
  display: table;
  height: 100%;
  background-color: grey;
}

#colLeft,
#colRight {
  display: table-column;
  height: 100%;
}

#row1,
#row2,
#row3 {
  display: table-row;
  height: 100%;
}

#cell1,
#cell2,
#cell3 {
  display: table-cell;
  height: 100%;
}</code>

在此範例中，「display: table- column」聲明應用於「colLeft」和「colRight」元素。這些元素不包含任何內容；它們的唯一目的是定義各自行中單元格的佈局。

儘管存在這些列定義，您可能會注意到瀏覽器中沒有顯示任何內容。這是因為，如前所述，列不直接包含內容。內容必須放置在表格儲存格內，而表格儲存格是表格行的子項目。

為了解決這個問題，我們需要修改HTML 結構以將內容放置在表格單元格內：

<code class="html"><section>
  <div id="colLeft">
    <div id="row1">
      <div id="cell1">AAA</div>
    </div>
    <div id="row2">
      <div id="cell2">BBB</div>
    </div>
  </div>
  <div id="colRight">
    <div id="row3">
      <div id="cell3">CCC</div>
    </div>
  </div>
</section></code>

有了這個修改後，內容按預期顯示，演示了「display : table-column」的正確使用。

以上是CSS 中「display: table-column」的真正目的是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！