CSS如何显示：table-column“应该工作？

给定下面的HTML和CSS，我看到绝对没有在我的浏览器(Chrome和IE最新的写作时)。一切都崩溃到0x0 px。为什么？

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        section { display: table; height: 100%; background-color: grey; }

        #colLeft { display: table-column; height: 100%; background-color: green; }
        #colRight { display: table-column; height: 100%; background-color: red; }

        #row1 { display: table-row; height: 100%; }
        #row2 { display: table-row; height: 100%; }
        #row3 { display: table-row; height: 100%; }

        #cell1 { display: table-cell; height: 100%; }
        #cell2 { display: table-cell; height: 100%; }
        #cell3 { display: table-cell; height: 100%; }
    </style>
</head>
<body>
    <section>
        <div id="colLeft">
            <div id="row1">
                <div id="cell1">
                    AAA
                </div>
            </div>
            <div id="row2">
                <div id="cell2">
                    BBB
                </div>
            </div>
        </div>
        <div id="colRight">
            <div id="row3">
                <div id="cell3">
                    CCC
                </div>
            </div>
        </div>
    </section>
</body>
</html>

解决方法

CSS表模型基于HTML表模型
http://www.w3.org/TR/CSS21/tables.html

表格划分为ROWS，每行包含一个或多个单元格。单元格是ROWS的子类，它们从不是列的子类。

“display：table-column”不提供用于制作列布局的机制(例如，具有多个列的报纸页面，其中内容可以从一列到另一列)。

相反，“table-column”仅设置适用于表的行中的相应单元格的属性。例如。 “每行中的第一单元的背景颜色是绿色”可以被描述。

表本身的结构与HTML中的表结构相同。

在HTML中(注意“td”在“tr”内，不在“col”内)：

<table ..>
  <col .. />
  <col .. />
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
</table>

使用CSS表属性的相应HTML(请注意，“列”div不包含任何内容 – 标准不允许直接在列中的内容)：

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

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

可选：通过为每个行和单元格分配多个类，可以对“行”和“列”进行样式化，如下所示。该方法在指定要被样式化的单元格或单个单元格的各个集合时提供最大的灵活性：

//Useful css declarations,depending on what you want to affect,include:

/* all cells (that have "class=mycell") */
.mycell {
}

/* class row1,wherever it is used */
.row1 {
}

/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}

/* cell1 of row1 */
.row1 .cell1 {
}

/* cell1 of all rows */
.cell1 {
}

/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}

/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}

/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}

/* cell1 of all rows of a mytable */
.mytable .cell1 {
}

<div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow row1">
    <div class="mycell cell1">contents of first cell in row 1</div>
    <div class="mycell cell2">contents of second cell in row 1</div>
  </div>
  <div class="myrow row2">
    <div class="mycell cell1">contents of first cell in row 2</div>
    <div class="mycell cell2">contents of second cell in row 2</div>
  </div>
</div>

在今天的灵活设计中，使用< div>为了多个目的，明智的做法是在每个div上放置一些类，以帮助引用它。这里，以前是< tr>在HTML中成为类myrow，< td>成为mycell类。这个约定是什么使上述CSS选择器有用。

性能注意：在每个单元格上放置类名称，并使用上面的多类选择器，比使用以*结尾的选择器更好的性能，例如.row1 *或甚至.row1> *。原因是选择器最后匹配，所以当寻找匹配元素时，.row1 *先做*匹配所有元素，然后检查每个元素的所有祖先，以查找是否有任何祖先有类row1。在慢速设备上的复杂文档中，这可能很慢。 .row1> *更好，因为只检查直接父。但是，通过.row1 .cell1立即消除大多数元素仍然更好。 (.row1> .cell1是一个更紧凑的规格，但它是搜索的第一步，使最大的区别，所以它通常不值得杂乱，和额外的思考过程，是否将永远是添加子选择器的直接子元素&gt ;.

获取性能的关键是，选择器中的最后一个项目应尽可能具体，并且不应该是*。

原文地址：https://www.jb51.cc/css/223511.html

CSS如何显示：table-column“应该工作？

解决方法

相关推荐