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 上放置 some 类，以帮助引用它。在这里，以前 HTML 中的<tr> 变成了class myrow，而<td> 变成了class mycell。这种约定使上述 CSS 选择器很有用。
性能说明：将类名放在每个单元格上，并使用上述多类选择器，比使用以* 结尾的选择器（例如.row1 * 甚至@987654336）性能更好@。原因是选择器是last first匹配的，所以在寻找匹配元素时，.row1 *首先匹配*，匹配所有元素，然后检查每个元素的所有祖先，查找是否有任何祖先有class row1。这在慢速设备上的复杂文档中可能会很慢。 .row1 > * 更好，因为只检查直接父级。但是最好还是通过.row1 .cell1 立即消除大多数元素。 （.row1 > .cell1 是一个更严格的规范，但它是搜索的第一步，这是最大的不同，所以通常不值得混乱，以及关于它是否永远是一个直接的孩子的额外思考过程，添加子选择器>。）
重新性能的关键是选择器中的最后一个项应该尽可能具体，并且不应该是*。