如何CSS“显示：表列”应该工作？
鉴于下面的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> CSS表格模型基于HTML表格模型http://www.w3.org/TR/CSS21/tables.html
一个表被分成ROWS，每行包含一个或多个单元格。 细胞是ROWS的孩子，他们从来没有列的孩子。
“display：table-column”没有提供制作柱状布局的机制（例如，具有多列的报纸页面，其内容可以从一列stream向下一列）。
而是，“table-column”只设置适用于表格行内相应单元格的属性。 例如，可以描述“每行中第一个单元的背景颜色是绿色的”。
表格本身的结构与HTML相同。
在HTML中（注意“td”在“tr”中，而不在“col”中）：
<table ..> <col .. /> <col .. /> <tr ..> <td ..></td> <td ..></td> </tr> <tr ..> <td ..></td> <td ..></td> </tr> </table>
相应的HTML使用CSS表格属性（请注意，“列”divs不包含任何内容 – 标准不允许直接在列中的内容）：
.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>
“table-column”显示types意味着它的行为就像HTML中的<col>标签 – 即一个不可见的元素，其宽度*控制封闭表的相应物理列的宽度。
有关CSS表格模型的更多信息，请参阅W3C标准 。
*还有其他一些属性，如边框，背景。
