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

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）这是一个浏览器的问题吗？我在火狐和Chrome上测试了这个问题，发现这两个版本都有问题，但当我在IE的一个版本上测试时（不记得是哪个了，它在工作），似乎根本就没有发生。

2）是否有一个优雅的最佳实践方法来解决这个问题？我发现，在div右侧添加20px左右的填充可以解决这个问题，因为它为滚动条提供了足够的喘息空间，但当然，当表中没有填充足够的数据以导致溢出时，填充仍然是一个不美观的20px空格。似乎有很多类似的方法来解决这个问题（比如添加一个与滚动条宽度相同的空表列，设置overflow-y：scroll，这会导致滚动条始终是垂直的，或者在外部表上设置一个硬编码的宽度），但它们似乎都有各自的优点和缺点。最终，我编写了一个javascript函数，当有垂直滚动条时，onload将填充添加到内部表中，但对于一个我认为根本不应该发生的问题来说，它似乎有点矫枉过正。

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

Answer 1

添加填充-右：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>