CSS表格模型基于HTML表格模型
http://www.w3.org/TR/CSS21/tables.html个
表格分为多行,每行包含一个或多个单元格.单元格是行的子元素,而不是列的子元素.
"DISPLAY:TABLE-COLUMN"不提供制作栏目布局的机制(例如,具有多个栏目的报纸页面,其中内容可以从一个栏目流向下一个栏目).
相反,"table-column"只设置应用于表行中相应单元格的属性.例如.可以描述为"每行第一个单元格的背景色为绿色".
表本身的 struct 始终与HTML中的 struct 相同.
在HTML中(注意到"td"在"tr"内,而不是在"ol"内):
<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>
OPTIONAL:通过将多个类分配给每个行和单元格,可以设置"行"和"列"的样式,如下所示.此方法在指定要设置样式的各种单元格集合或单个单元格方面提供了最大的灵活性:
//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上设置some类,以帮助参考它.在这里,HTML中的<tr>
变成了class myrow
,<td>
变成了class mycell
.正是这种约定使得上述CSS Select 器非常有用.
PERFORMANCE NOTE:将类名放在每个单元格上,并使用上面的多类 Select 器,比使用以*
结尾的 Select 器(例如.row1 *
甚至.row1 > *
)的性能更好.原因是 Select 器是匹配last first的,所以当查找匹配元素时,.row1 *
首先做*
,这匹配all个元素,然后判断all the ancestors of each element,以查找是否有祖先有class row1
.在速度较慢的设备上的复杂文档中,这可能会很慢..row1 > *
更好,因为只判断直接父级.但是,通过.row1 .cell1
立即消除大多数元素要好得多.(.row1 > .cell1
是一个更严格的规范,但它是搜索的第一步才是最大的不同之处,所以通常不值得把它弄得乱七八糟,也不值得额外的思考过程来决定它是否永远是一个直接的子项,即添加子项 Select 器>
.)
go 掉Rperformance的关键点是 Select 器中的last项应该是as specific as possible,而不应该是*
.