垂直滚动条溢出时生成水平滚动条

Question

我在一个包含数千个页面的大型遗留系统中工作，其中动态生成的表格数据填充到以以下格式定义的 html 中：

<table style="border: 2px solid blue;">
    <tr>
        <td>
            <div style="overflow: auto; border: 2px solid orange; height: 200px;">
                <table style="border: 2px solid green;">
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                </table>
            </div>
        </td>
    </tr>
</table>

我的任务是移除看似困扰系统的不必要的小水平滚动条。经过一段时间的检查，我意识到当表格数据量垂直溢出包含的 div 并导致出现垂直滚动条时，新生成的垂直滚动条本身会推入 div 的内容区域，从而导致表格数据溢出水平，从而导致出现不希望的水平滚动条。换句话说，当垂直滚动条出现时，它会侵入内容空间，从而导致水平滚动条出现。这可以通过以下事实来直观地理解：无论可滚动的 div 的宽度如何，水平滚动条的可滚动空间正好是垂直滚动条的宽度。

我的问题是：

1) 这是浏览器的问题吗？我在 Firefox 和 Chrome 上对此进行了测试，并在两者中都发现了问题，但是当我在一个 IE 版本上进行测试时（不记得是哪个版本，它在工作），它似乎根本没有发生。

2) 有没有一种优雅的最佳实践方法来解决这个问题？我发现在 div 的右侧添加大约 20px 的填充可以通过为滚动条提供足够的喘息空间来推动这个问题，但是当然，当表格没有填充足够的数据导致溢出时，填充仍然存在作为难看的 20px 空白间隙。似乎有很多类似的方法可以解决这个问题（比如在滚动条的宽度上添加一个空表列，设置 overflow-y:scroll 导致始终是垂直滚动条，或者在外部设置硬编码宽度表），但它们似乎都有自己的优点和缺点。最终，我编写了一个 javascript 函数，只要有垂直滚动条，onload 就会向内表添加填充，但对于我认为一开始不应该发生的问题，这对我来说似乎有点矫枉过正。

更新： 1）我需要保持在y轴上溢出的能力。页面上除了表格之外还有其他数据，因此每当为表格生成太多数据时，表格需要垂直滚动。但是，这当然是水平滚动问题。

Answer 1

添加一个 padding-right:20px;似乎在 Firefox 上对我有用

<table style="border: 2px solid blue;">
    <tr>
        <td>
            <div style="overflow: auto; border: 2px solid orange; height: 200px;">
                <table style="border: 2px solid green;">
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                    <tr><td>testingtext</td><td>testingtext</td><td>testingtext</td><td>testingtext</td></tr>
                </table>
            </div>
        </td>
    </tr>
</table>