CSS3显示:table,overflow-y:scroll不起作用

Question

我有一个需要垂直滚动的数据表.似乎如果您的显示值是表格,则无法设置高度或最大高度,因此overflow-y:scroll不执行任何操作.(Codepen与表)

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

另外,如果从父级删除display:table但保留display:table-row和table-cell,则行的宽度不会是100%;

我尝试用flexbox(带有flexbox的Codepen)来做这件事.但是,当然,我没有很好的列左对齐.

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

浏览器支持是所有现代浏览器(IE10 +),包括移动safari和Android浏览器.

Answer 1

看来,如果您的显示值是表格,则无法设置height或max-height

实际上,规范说(max-height):

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

并且您可以使用该height属性,但它将被视为最小高度,因此不会产生溢出(表高度算法):

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

在这种情况下,由于没有表格容器,因此会生成匿名容器(匿名表对象):

除HTML之外的文档语言可能不包含CSS 2.1表模型中的所有元素.在这些情况下,必须假定"缺少"元素才能使表模型起作用.任何表元素都会自动生成必要的匿名表对象

但是这个匿名表不一定会那么宽.fake-table.
我尝试用flexbox这样做

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

也许CSS Grid会更好,但它目前是实验性的,只有IE10支持它(规范的旧版本,很难).

基本上,您有两种选择: