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表模型
一个表分为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是一个更加严格的规范，但这是搜索的第一步，它会带来最大的不同，因此通常不值得一团糟，而且，对于是否将始终是直接子对象，需要进行额外的思考过程子选择器>。）
取消重新 性能 的关键是选择器中的 最后 一项应该 尽可能具体 ，而绝不能如此*。
-
问题内容： 我正在尝试建立我的第一个响应式布局。我想以垂直线显示列表项，具体取决于宽度。 如果浏览器调整大小，我希望它成为 有人能帮我吗？我已经尝试了几个小时，却什么也没得到。我试过使用表，但我也不能那样做。 问题答案： 使用 CSS3 列可以很容易地做到这一点。这是一个示例，HTML：
-
问题内容： 我想显示一个带有控件的基本html表，以切换其他列的显示/隐藏： 因此，默认情况下，列1和列2将是唯一显示的列-但是，当您单击列1时，我希望1a和1b切换，与列2和2a和2b相同。我可能最终会有更多的列和很多行- 因此，当我进行测试时，任何JavaScript循环方法都太慢而无法使用。 似乎足够快的唯一方法是设置一些CSS，如下所示： 然后在表标题单元格上设置onClick函数调用，这
-
问题内容： 简而言之，我正在实现一个图形，现在正在研究Kruskal，我需要一个优先级队列。我对优先级队列的定义是，具有最小密钥的元素将排在最前面？错了吗 因为当我在队列中插入加权边（或数字）时，它们不会最终排序。 那会打印出来；[1、54、51、102、99、55]。这不是我希望他们成为的那样！是的，我制作了一个进入优先级队列的编译器，该队列从边缘对象中提取数字并根据该int进行比较。因此，这应
-
问题内容： 我有一个要在垂直约束的空间中放置的物品的清单： 由于我不希望列表的高度超过特定的高度，但是我可以自由地将其水平扩展，因此我想将列表分为几列，如下所示： 或者，或者（在我看来，顺序并不重要） css属性允许将列表分成几列，但只接受固定数量的列。我不知道我要拥有的项目数（可以从1增加到40以上），因此，如果我将列数设置为3，则任何包含6个以上项目的列表都将过高，并且如果只有4个项目，则只有
-
问题内容： 使用以下HTML，将列表显示为两列的最简单方法是什么？ 所需显示： 该解决方案必须能够在Internet Explorer上运行。 问题答案： 现代浏览器 利用css3列模块来支持您要寻找的内容。 CSS： 旧版浏览器 不幸的是，要获得IE支持，您将需要一个涉及JavaScript和dom操作的代码解决方案。这意味着，只要列表内容发生更改，您就需要执行将列表重新排序为列并重新打印的操作
-
问题内容： 我一直在寻找一个很好的技巧，使隐藏/显示内容或仅具有CSS而没有javascript的列表。我已成功执行此操作： 并且它正在工作，但没有达到应有的效果。这是问题所在：显示内容时，您可以通过单击“页面上的任何位置”将其隐藏。如何禁用它？如何通过单击“隐藏”隐藏内容“仅”？先感谢您！ 问题答案： 我不会使用复选框，而是使用您已经拥有的代码 CSS HTML 这样，仅在单击hide元素时隐藏