為什麼 CSS 表格版面配置中的「display: table-column」不能如預期般運作？

為什麼「display: table-column」在我的 CSS 版面中不起作用？

鑑於提供的HTML 和CSS 程式碼，您可能會期望看到一個包含兩列（「colLeft」和「colRight」）和三行（「row1」、「row2」和「第3行”）。然而，在 Chrome 和 IE 等瀏覽器中，整個佈局會折疊為零大小。

這種行為源自於對 CSS 表格模型運作方式的根本誤解。雖然它類似於HTML 表格模型，但存在重大差異：

• 列不是直接容器：在HTML 表格中，列("") 不直接含有細胞。相反，單元格（“”）是行（“ ”）的子項。此結構在 CSS 表格模型中維護。
• 「display: table-column」定義單元格屬性： 在元素上使用「display: table-column」不會在傳統意義上。相反，它設定適用於表行中的單元格的屬性。例如，您可以使用它來定義每行中第一個儲存格的背景顏色。
• 標準表格結構：表格的整體結構與 HTML 中的相同。行包含單元格，列不包含任何直接內容。

正確的HTML 和CSS 結構：

要建立有效的CSS 表格佈局，您應該使用以下結構：

<code class="html"><div class="mytable">
  <div class="mycolumn1"></div>
  <div class="mycolumn2"></div>
  <div class="myrow">
    <div class="mycell">Contents of first cell in row 1</div>
    <div class="mycell">Contents of second cell in row 1</div>
  </div>
  <div class="myrow">
    <div class="mycell">Contents of first cell in row 2</div>
    <div class="mycell">Contents of second cell in row 2</div>
  </div>
</div></code>

登入後複製

<code class="css">.mytable {
  display: table;
}
.mycolumn1 {
  display: table-column;
  background-color: green;
}
.mycolumn2 {
  display: table-column;
  background-color: red;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}</code>

登入後複製

以上是為什麼 CSS 表格版面配置中的「display: table-column」不能如預期般運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！