CSS3显示：table，overflow-y：scroll不起作用

Question

我有一个需要垂直滚动的数据表。似乎如果 display 值是 table ，则无法设置 height 或 max-height ，等等 overflow-y：滚动什么都不做。 （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浏览器。

Answer 1

• 如果您的显示值是表格，则无法设置height或max-height

  有效地，规范说（max-height）：

    

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

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

    

  表格的高度由“高度”属性给出   'table'或'inline-table'元素。值'auto'表示   height是行高度加上任何单元格间距或边框的总和。   任何其他值都被视为最小高度。

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

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

    

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

  但该匿名表不一定与.fake-table一样宽。

• 我尝试使用flexbox

  执行此操作

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

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

基本上，您有两种选择：

• 固定列宽方法

  如果预定义列的宽度，则结果将是网格，即使您不使用表格/网格显示。

• 非表格包装

  您可以将表格包裹在虚拟（非表格）元素中，并将overflow和max-height设置为该元素。

Answer 2

将.fake-table换成div？

CodePen

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