CSS“显示:表列”应该如何工作?


87

鉴于以下HTML和CSS,我在浏览器中看不到任何东西(撰写本文时最新的Chrome和IE)。一切都崩溃为0x0像素。为什么?

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

Answers:


118

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

一个表分为ROWS,每一行包含一个或多个单元格。单元格是ROWS的子级,它们是列的子级。

“ display: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(请注意,“ column” 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成了class myrow,和<td>成为class mycell。该约定使上述CSS选择器有用。

性能注意:将类名放在每个单元格上,并使用上述多类选择器,比使用以*.row1 *或甚至结尾的选择器更好.row1 > *。原因是选择器首先匹配,所以在寻找匹配元素时,.row1 *首先*匹配所有元素,然后检查每个元素的所有祖先,以查找是否有祖先class row1。在速度较慢的设备上的复杂文档中,这可能会很慢。.row1 > *更好,因为只检查直系父母。但是,最好还是立即通过消除大多数元素.row1 .cell1。(.row1 > .cell1是一个更加严格的规范,但这是搜索的第一步,它会带来最大的不同,因此通常不值得一团糟,并且需要额外的思考过程来确定它是否永远是直接子对象,子选择器>。)

取消性能表现的关键点是选择器中的最后一项应尽可能具体,而绝不能如此*


我自己还没有尝试过,但是我看到了对tanalin.com/en/projects/display-table-htc的建议, 这是IE6和IE7的JavaScript解决方案。当javascript运行时,它将页面转换成较旧的HTML表格标签。
制造商史蒂夫(Steve)

该解决方案适用于IE8 +,Firefox,Chrome,iPad,Android。如果需要灵活的表结构并且支持上面列出的更现代的浏览器,这是避免表布局的好方法。
mbokil

<col style="color: red;" >是行不通的,但是<col style="background-color: red;" >没关系!这是怎么了?
xgqfrms

@xgqfrms:其他一些CSS规则必须覆盖颜色。可能是一条规则应用于您的单元内的元素。例如,如果您的文本位于<p>内,则您在某处具有更特定的规则设置<p>颜色。尝试<col style="color: red !important;">。如果这可行,那就是问题所在。但是,不要养成过度使用的习惯!important。看到该工作后,最好将其删除,并找出更具体的选择器优先。google“ css更具体的选择器”,或查看smashingmagazine.com/2007/07/…–
ToolmakerSteve

23

“表列”显示类型意味着它的行为类似于<col>HTML中的标记-即一个不可见的元素,其width *控制着封闭表的相应物理列的宽度。

有关CSS表模型的更多信息,请参见W3C标准

*以及其他一些属性,例如边框,背景。


2
如果col元素具有它的逻辑结构,那么如何使用display: table-column;仅具有表示结构的CSS规则来证明其合理性?根据displayw3.org/wiki/CSS/Properties/display)上的规范,它应该像col元素一样“表现” 。但是我看不到它有什么用...
chharvey 2012年

1
@ TestSubject528491因为这样您可以设置[presentational]表的列背景,列宽等。但是,实际上,它对于为<col>标签本身或在其他基于XML的标记语言中的等效标签指定默认样式规则而言非常有用。
Random832 2012年

@chharvey:HTMLcol是一个逻辑元素, 包含外观样式。您不能在其中添加一列信息-这是一种常见的误解。表数据始终按行排列。display: table-column;将逻辑元素(通常为a div)转换为col。它将使分配给该元素的其他样式字段应用于表示概念“列”。结果是一个不显示的逻辑元素,其内容(如果有)将被忽略;它的唯一作用是将样式应用于关联的演示文稿的“列”。请参阅我的答案以获取模板。
ToolmakerSteve
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.