CSS「display: table-column」該如何運作？

在 HTML 中，表格由行組成，每行含有細胞。 CSS 擴展了這個概念，讓設計者定義特定的行和列佈局。雖然「display: table-row」和「display: table-cell」很簡單，但「display: table-column」有更微妙的目的。

理解「display: table-」的功能column"

與「display: table-row」和「display: table-cell」不同，「display: table-column」不會建立新的列結構。相反，它為現有表行中的單元格設定屬性。例如，您可以指定每行中第一個單元格的背景顏色。

HTML 與CSS 表格結構

要理解這個概念，請考慮以下HTML表：

Cell 1
    
Cell 2
  
Cell 3
    
Cell 4
  

對應HTML結構，可以應用以下CSS：

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

在此範例中，「.column1」和「.column2」div 不是內容容器。它們僅定義表格行中儲存格的屬性。

要記住的要點

• "display: table-column" 設定表格列中儲存格的屬性，不適用於列本身。
• 底層表格結構與 HTML 中的相同，單元格是行的子級。
• "顯示： table-column」不提供多列佈局機制，其中內容在列之間流動。