css - 如何对表格进行 CSS 样式设置，使单元格最多为屏幕高度的 30%，并在更高时使用滚动条？

Question

如何对表格进行 CSS 样式设置

• 一个单元格最多为屏幕高度的 30%
• 当它高于屏幕高度的 30% 时使用垂直滚动条
• 如果滚动条短于屏幕高度的 30%，则不要使用滚动条
• 适用于 Firefox 和 Chrome

编辑

我试过了

tr td {
    max-height:30%;
    height:auto !important;
    overflow:scroll;
}

和几个没有运气的变种。高单元格的高度超过屏幕高度的 30%。

如果原件太难，另一个问题：

我可以接受任何方式来呈现大单元格的内容，例如，如果大单元格可以通过按钮或其他东西合拢并重新打开，并且滚动条不是绝对必需的，只要单元格高度最多30% 的屏幕；即主要目标是避免一个单元格太高以至于整个屏幕都显示一个单元格的一部分。

Answer 1

有什么理由它必须是 30% 而不是设定的高度？通过将内容放入 div 中，我能够达到我认为您想要的效果

tr td div.box {
   max-height:200px;
   overflow-y:scroll;
}