如何用 CSS `display: table-cell` 來模擬 colspan 和 rowspan？

實現類似表格的行為：解決CSS 顯示中缺乏Colspan 和Rowspan 的問題：Table-Cell

現代Web 開發通常涉及樣式化元素以使其表現得像表格。使用 display: table 和 display: table-cell 等 CSS 屬性，開發人員可以實現類似表格的佈局。但是，在模擬 colspan 和 rowspan 的基本功能時存在限制。

考慮以下HTML 和CSS 程式碼：

HTML:

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
  <div class="row">
    <div class="cell colspan2">Cell</div>
  </div>
</div>

CSS:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.colspan2 {
  /* What to do here? */
}

目標是讓第二行中的「單元格”跨越兩列。不幸的是，對於具有 display: table-cell 的 CSS 元素，沒有與 colspan 或 rowspan 直接等效的東西。

根據研究，此限制源自於這樣一個事實：display: table 版面模式並不是完整實作HTML 表格模型。它模仿某些類似表格的行為，但不是全部。因此，我們缺乏明確定義 colspan 或 rowspan 的能力。

在這種情況下，建議探索替代方法來實現所需的類似表格的佈局，而不依賴 display: table。一種可能的解決方案是使用 Flexbox。以下是一個範例：

CSS:

.flex-table {
  display: flex;
  flex-direction: row;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-cell {
  display: flex;
  flex: 1 0 auto;
}

.colspan2 {
  flex: 2 0 auto;
}

此解決方案涉及使用 Flexbox 建立類似表格的佈局，同時仍提供對 colspan 和 rowspan 的支援。但請注意，不同的瀏覽器呈現的版面可能略有不同。始終建議跨瀏覽器徹底測試程式碼，以確保結果一致。

以上是如何用 CSS `display: table-cell` 來模擬 colspan 和 rowspan？的詳細內容。更多資訊請關注PHP中文網其他相關文章！