我试图让表格中的列具有预定义的高度,并滚动以允许它们的内容适合。我目前使用的是 Chrome 和 Safari,但不适用于 Firefox(至少在我的 MacBook 上)。在 Firefox 中,由于某种原因,表格的高度会增长以适应其所有内容。
这是 HTML,
<table>
<tbody>
<tr>
<td>
<div class="scrolling_div">
...{content}...
</div>
</td>
</tr>
</tbody>
CSS,
/*** css reset ***/
html * { margin: 0; padding: 0; border: 0; font-size: 1em; text-decoration: none; line-height: 1em; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
/*** actual css ***/
table {
width: 50vw;
height: 50vh;
border: 1px solid red;
}
.scrolling_div {
height: 100%;
overflow-y: scroll;
}
和 JSFiddle for this question .
如果您将 .scrolling_div 的高度设置为特定像素数,则可以解决此问题,但我想将其保持在 100% 以使其填满表格,因此这适用于不同的表格大小。
如有任何帮助,我们将不胜感激。
最佳答案
只需将 'max-height:tableHeight' 添加到 .scolling_div
.scrolling_div {
height: 100%;
overflow-y: scroll;
max-height: 50vh;
}
关于html - 表格 CSS 在 Chrome 和 Firefox 中有不同的效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44849802/