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

CSS 中「display: table-column」的作用

在本文中，我們將探討「display: table-column」如何「column」在CSS 中工作。

CSS 表格模型與 HTML 表格模型一致，其中行和單元格是基本組件。單獨使用“display: table-column”無法建立柱狀佈局。

相反，它設定特定於表格行中的儲存格的屬性。例如，它可以指定每行中第一個儲存格的背景顏色。

在HTML 中，表格的結構如下：

<code class="html"><table>
  <col></col>
  <col></col>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table></code>

使用CSS 表格屬性，對應的HTML 為：

<code class="css">.mytable {
  display: table;
}

.myrow {
  display: table-row;
}

.mycell {
  display: table-cell;
}

.column1 {
  display: table-column;
  background-color: green;
}

.column2 {
  display: table-column;
}</code>

<code class="html"><div class="mytable">
  <div class="column1"></div>
  <div class="column2"></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>

透過理解C🎜>

以上是CSS 中的「display: table-column」如何運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！