CSS 中的「display: table-column」實際上做了什麼？

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 table:

<code class="html"><table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table></code>

對應HTML結構，如下CSS即可Applied:

<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>

在此範例中，「.column1」和「.column2」div不是內容容器。行中單元格的屬性，不適用於列本身。中的相同，單元格是行。

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