Why Doesn\'t \'display: table-column\' Work as Expected in CSS Table Layout?

Why Doesn't "display: table-column" Work in My CSS Layout?

Given the HTML and CSS code provided, you might expect to see a layout with two columns ("colLeft" and "colRight") and three rows ("row1", "row2", and "row3"). However, in browsers like Chrome and IE, the entire layout collapses to zero size.

This behavior arises from a fundamental misunderstanding of how the CSS table model works. While it resembles the HTML table model, there are crucial differences:

• Columns Are Not Direct Containers: In HTML tables, columns ("") do not directly contain cells. Instead, cells ("") are children of rows (" "). This structure is maintained in the CSS table model.
• "display: table-column" Defines Cell Attributes: Using "display: table-column" on an element does not create a column in the traditional sense. Instead, it sets attributes that apply to cells within table rows. For example, you could use it to define the background color of the first cell in each row.
• Standard Table Structure: The overall structure of the table remains the same as in HTML. Rows contain cells, and columns do not contain any direct content.

Correct HTML and CSS Structure:

To create a valid CSS table layout, you should use the following structure:

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

The above is the detailed content of Why Doesn\'t \'display: table-column\' Work as Expected in CSS Table Layout?. For more information, please follow other related articles on the PHP Chinese website!