Горизонтальная полоса прокрутки, созданная при переполнении вертикальной полосы прокрутки

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) Существует ли элегантный метод передового опыта для решения этой проблемы? Я обнаружил, что добавление около 20px отступов к правой стороне div позволяет избавиться от этой проблемы, предоставив полосе прокрутки достаточно пространства для вставки, но, конечно, когда таблица не заполнена достаточным количеством данных, чтобы вызвать переполнение, заполнение все еще остается как неприглядный пробел в 20 пикселей. Похоже, есть много похожих способов решения проблемы (например, добавление пустого столбца таблицы шириной полосы прокрутки, установка overflow-y: scroll, которая приводит к тому, что ВСЕГДА будет вертикальная полоса прокрутки, или установка жестко заданной ширины на внешней стороне). таблица), но все они, похоже, имеют свои преимущества и недостатки. В конечном итоге я написал функцию javascript, которая onload добавляет заполнение во внутреннюю таблицу всякий раз, когда есть вертикальная полоса прокрутки, но для меня это действительно кажется излишним из-за проблемы, которую я не думаю, что она вообще должна происходить.

ОБНОВЛЕНИЕ: 1) Мне нужно сохранить возможность переполнения на оси у. Помимо таблиц на странице есть другие данные, поэтому таблицы должны быть прокручиваться по вертикали всякий раз, когда для них генерируется слишком много данных. Однако это, конечно, проблема горизонтальной прокрутки.

Answer 1

Добавление отступа вправо:20 пикселей; кажется, делает трюк для меня на 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>