CSS3 display:table, overflow-y:scroll doesn't work

Question

I have a data table that needs to scroll vertically. It seems that if your display value is table, you cannot set a height or max-height, and so overflow-y:scroll does nothing. (Codepen with table)

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

Also, if you remove the display:table from the parent but keep the display:table-row and table-cell, the width of the rows will not be 100%;

I tried instead doing this with flexbox (Codepen with flexbox). But of course, then I don't have nice columns that are left-justified.

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

Browser support is all modern browsers (IE10 +) including mobile safari and android browser.

Answer 1

• It seems that if your display value is table, you cannot set a height or max-height

  Effectively, the spec says (max-height):

  In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.

  And you can use the height property, but it will be treated as a minimum height, and thus won't produce overflow (Table height algorithms):

  The height of a table is given by the 'height' property for the 'table' or 'inline-table' element. A value of 'auto' means that the height is the sum of the row heights plus any cell spacing or borders. Any other value is treated as a minimum height.

• Also, if you remove the display:table from the parent but keep the display:table-row and table-cell, the width of the rows will not be 100%

  In this case, since there is no tabular container, an anonymous one is generated (Anonymous table objects):

  Document languages other than HTML may not contain all the elements in the CSS 2.1 table model. In these cases, the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself

  But that anonymous table won't necessarily be as wide as .fake-table.

• I tried instead doing this with flexbox

  Flexbox is a bad choice because it has no grid notion.

  Maybe CSS Grid would be better, but it's currently experimental and only IE10 supports it (an older version of the spec, tough).

Basically, you have two options:

• Fixed column width approach

  If you predefine the width of the columns, the result will be a grid, even if you don't use tabular/grid displays.

• Non-tabular to wrapper

  You can wrap your table inside a dummy (non-tabular) element, and set overflow and max-height to that element.