Question

我试图让表格中的列具有预定义的高度，并滚动以允许其内容适合。我目前在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％以使其填充表格，因此这适用于不同的表格大小。

非常感谢任何帮助。

Answer 1

浏览器以不同的方式处理样式。 Chrome和Safari都是WebKit浏览器，因此可以理解它们取得了类似的效果。

您可以通过引用其供应商前缀来定位特定浏览器。

假设您想在Chrome和Safari上使用border-radius的{{1}}表，但默认情况下Firefox会添加更多填充，因此您只想将该浏览器单独调整为{} {1}}：

50%

以下是webkit的一系列供应商扩展的列表： https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions

我不确定究竟是什么导致了您的问题 - 但如果您在浏览器中获得不同的行为，那么供应商前缀是开始调试的最佳方式。

Answer 2

只需将'max-height：tableHeight'添加到.scolling_div

即可

.scrolling_div {
    height: 100%;
    overflow-y: scroll;
    max-height: 50vh;
}

表格CSS在Chrome和Firefox中有不同的效果

2 个答案: