CSS“显示：表列”应该如何工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7617418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How is a CSS "display: table-column" supposed to work?
提问by Eliot
Given the following HTML and CSS, I see absolutely nothing in my browser (Chrome and IE latest at time of writing). Everything collapses down to 0x0 px. Why?
鉴于以下 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>
回答by ToolmakerSteve
The CSS table model is based on the HTML table model http://www.w3.org/TR/CSS21/tables.html
CSS 表格模型基于 HTML 表格模型 http://www.w3.org/TR/CSS21/tables.html
A table is divided into ROWS, and each row contains one or more cells. Cells are children of ROWS, they are NEVER children of columns.
一张表被分成ROWS，每一行包含一个或多个单元格。单元格是 ROWS 的孩子，它们永远不是列的孩子。
"display: table-column" does NOT provide a mechanism for making columnar layouts (e.g. newspaper pages with multiple columns, where content can flow from one column to the next).
"display: table-column" 不提供用于制作柱状布局的机制（例如，具有多栏的报纸页面，内容可以从一栏流到下一栏）。
Rather, "table-column" ONLY sets attributes that apply to corresponding cells within the rows of a table. E.g. "The background color of the first cell in each row is green" can be described.
相反，“表格列”仅设置适用于表格行内相应单元格的属性。例如可以描述“每行第一个单元格的背景颜色是绿色”。
The table itself is always structured the same way it is in HTML.
表格本身的结构始终与 HTML 中的结构相同。
In HTML (observe that "td"s are inside "tr"s, NOT inside "col"s):
在 HTML 中（注意“td”在“tr”内，而不是在“col”内）：
<table ..>
<col .. />
<col .. />
<tr ..>
<td ..></td>
<td ..></td>
</tr>
<tr ..>
<td ..></td>
<td ..></td>
</tr>
</table>
Corresponding HTML using CSS table properties (Note that the "column" divs do not contain any contents -- the standard does not allow for contents directly in columns):
使用 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>OPTIONAL: both "rows" and "columns" can be styled by assigning multiple classes to each row and cell as follows. This approach gives maximum flexibility in specifying various sets of cells, or individual cells, to be styled:
可选：“行”和“列”都可以通过为每行和单元格分配多个类来设置样式，如下所示。这种方法在指定要设置样式的各种单元格集或单个单元格时提供了最大的灵活性：
//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>In today's flexible designs, which use <div>for multiple purposes, it is wise to put someclass on each div, to help refer to it. Here, what used to be <tr>in HTML became class myrow, and <td>became class mycell. This convention is what makes the above CSS selectors useful.
在当今<div>用于多种用途的灵活设计中，明智的做法是在每个 div 上放置一些类，以帮助引用它。在这里，曾经<tr>在 HTML 中的内容变成了class myrow，而<td>变成了class mycell. 这种约定使上述 CSS 选择器变得有用。
PERFORMANCE NOTE: putting class names on each cell, and using the above multi-class selectors, is better performance than using selectors ending with *, such as .row1 *or even .row1 > *. The reason is that selectors are matched last first, so when matching elements are being sought, .row1 *first does *, which matches allelements, and then checks all the ancestors of each element, to find if any ancestor has class row1. This might be slow in a complex document on a slow device. .row1 > *is better, because only the immediate parent is examined. But it is much better still to immediately eliminate most elements, via .row1 .cell1. (.row1 > .cell1is an even tighter spec, but it is the first step of the search that makes the biggest difference, so it usually isn't worth the clutter, and the extra thought process as to whether it will always be a direct child, of adding the child selector >.)
性能说明：将类名放在每个单元格上，并使用上述多类选择器，比使用以 结尾的选择器*（例如.row1 *或 ）性能更好.row1 > *。原因是选择器是last first匹配的，所以当寻找匹配元素时，.row1 *首先 do *，它匹配所有元素，然后检查每个元素的所有祖先，以查找是否有任何祖先具有class row1。这在慢速设备上的复杂文档中可能会很慢。.row1 > *更好，因为只检查直接父级。但是，通过 立即消除大多数元素仍然要好得多.row1 .cell1。(.row1 > .cell1是一个更严格的规范，但它是搜索的第一步，产生最大的不同，所以通常不值得混乱，以及关于它是否总是直系子的额外思考过程，添加子选择器>。）
The key point to take away re performanceis that the lastitem in a selector should be as specific as possible, and should never be *.
取消性能的关键点是选择器中的最后一项应该尽可能具体，并且永远不应该如此*。
回答by Random832
The "table-column" display type means it acts like the <col>tag in HTML - i.e. an invisible element whose width* governs the width of the corresponding physical column of the enclosing table.
“table-column”显示类型意味着它的作用类似于<col>HTML 中的标签 - 即一个不可见元素，其宽度* 控制封闭表格的相应物理列的宽度。
See the W3C standardfor more information about the CSS table model.
有关CSS 表模型的更多信息，请参阅W3C 标准。
* And a few other properties like borders, backgrounds.
* 以及一些其他属性，如边框、背景。
