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版本上测试时（不记得哪个，它在工作）它似乎根本没有发生。< / p>

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>

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

1 个答案: