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

标签 css css-tables

如何通过 CSS 设置表格样式

  • 一个单元格最多占屏幕高度的 30%
  • 当垂直滚动条高于屏幕高度的 30% 时使用垂直滚动条
  • 如果滚动条小于屏幕高度的 30%,则不要使用它
  • 在 Firefox 和 Chrome 中工作

编辑

我试过了

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

和几个没有运气的变体。高大的单元格比屏幕高度高出 30%。

如果原文太难了,另选一个问题:

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

最佳答案

与设定高度相比,它必须是 30% 有什么理由吗?我能够通过将内容放入 div 来达到我认为您想要的效果

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

关于css - 如何对表格进行 CSS 样式设置,使单元格最多为屏幕高度的 30%,并在更高时使用滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10654625/

相关文章:

css - 如何更改 Angular 6 Material 单选按钮外部波纹颜色

html - CSS 表中相邻单单元格行约束的多单元格列宽

html - 样式列跨度似乎不适用于表格

html - 阻止表格单元格重叠 HTML CSS

html - 为什么在尝试假设 divs 的高度时相对定位不起作用?

html - CSS居中全宽横幅图像没有滚动条

html - 可以用显示 : table-cell to stack vertically without using display:block? 强制元素

html - 分页后重复表格标题

css - 更改占位符文本的大小以适应移动设备

java - 使用响应编写图像 Sprite