CSS3 display:table，overflow-y:scroll不起作用 [英] CSS3 display:table, overflow-y:scroll doesn't work

问题描述

我有一个需要垂直滚动的数据表.看来，如果您的 display 值是 table ，则无法设置 height 或 max-height ，依此类推 overflow-y:scroll 不执行任何操作. (带有表的Codepen )

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;
}

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

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%;

我尝试改为使用flexbox(带有flexbox的Codepen ).但是，当然，那我没有左对齐的漂亮列.

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;
}

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

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

推荐答案

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

  该规范有效地说明了( max-height ):

  Effectively, the spec says (max-height):

  在CSS 2.1中，最小高度"和最大高度"对表格的影响， 内联表，表单元格，表行和行组未定义.

  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.

  并且您可以使用height属性，但是它将被视为最小高度，因此不会产生溢出(

  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):

  表格的高度由"height"属性指定 'table'或'inline-table'元素.值"auto"表示 height是行高加上任何单元格间距或边框的总和. 其他任何值均视为最小高度.

  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.

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

• 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):

  除HTML之外的其他文档语言可能不包含中的所有元素 CSS 2.1表模型.在这种情况下，缺失"元素必须 为了使表模型正常工作而被假定.任何表格元素 会自动在周围生成必要的匿名表对象 本身

  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

  但是该匿名表不一定要和.fake-table一样宽.

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

  我尝试使用flexbox来做到这一点

  I tried instead doing this with flexbox

  Flexbox是一个不好的选择，因为它没有网格概念.

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

  也许 CSS网格会更好，但目前处于试验阶段，仅IE10支持它(规格的较旧版本，很严格).

  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.

  非表格格式的包装器

  您可以将表包装在一个虚拟(非表格)元素中，并将overflow和max-height设置为该元素.

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

  这篇关于CSS3 display:table，overflow-y:scroll不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！