CSS3 显示：表格，溢出-y：滚动不起作用答案

【问题标题】：CSS3 display:table, overflow-y:scroll doesn't workCSS3 显示：表格，溢出-y：滚动不起作用
【发布时间】：2015-03-20 06:27:59
【问题描述】：

我有一个需要垂直滚动的数据表。看来如果你的display值是table，你就不能设置height或者max-height，等等overflow-y:scroll 什么都不做。 (Codepen with table)

.fake-table {
  display: table;
  max-height: 300px;
  overflow-y: scroll;
}

此外，如果您从父级中删除 display:table 但保留 display:table-row 和 table-cell，则行的宽度不会是 100%；

我尝试使用 flexbox (Codepen with flexbox) 来代替。但是，当然，我没有左对齐的好列。

.fake-table > * {
  display: flex;
  justify-content: space-around;
}

浏览器支持所有现代浏览器 (IE10 +)，包括移动 safari 和 android 浏览器。

【问题讨论】：

标签： css

【解决方案1】：

看来如果你的显示值是table，你不能设置height或者max-height

实际上，规范说 (max-height)：

在 CSS 2.1 中，'min-height' 和 'max-height' 对表格的影响，内联表格、表格单元格、表格行和行组未定义。

您可以使用height属性，但它会被视为最小高度，因此不会产生溢出（Table height algorithms）：

表格的高度由 'height' 属性给出 'table' 或 'inline-table' 元素。 'auto' 的值意味着高度是行高加上任何单元格间距或边框的总和。任何其他值都被视为最小高度。
此外，如果您从父级中删除 display:table，但保留 display:table-row 和 table-cell，则行的宽度不会是 100%

在这种情况下，由于没有表格容器，因此会生成一个匿名容器（Anonymous table objects）：

HTML 以外的文档语言可能不包含 CSS 2.1 表格模型。在这些情况下，“缺失”的元素必须假设为了使表模型工作。任何表格元素周围会自动生成必要的匿名表对象自己

但该匿名表不一定像 .fake-table 那样宽。
我尝试用 flexbox 来代替

Flexbox 是一个糟糕的选择，因为它没有网格概念。

也许CSS Grid 会更好，但它目前是实验性的，只有 IE10 支持它（旧版本的规范，很难）。

基本上，您有两种选择：

【讨论】：

【解决方案2】：

将您的.fake-table 包裹在div 中？

此外，使用实际的<table> 来显示表格数据是 100% 可以接受的……实际上它是首选。当事情变得多毛时，它使用表格进行布局。

【讨论】：