#html #css #scrollbar #horizontal-scrolling
#HTML #css #Полоса прокрутки #горизонтальная прокрутка
Вопрос:
Я работаю в большой устаревшей системе с тысячами страниц, где динамически генерируемые табличные данные заполняются в 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) Существует ли элегантный метод наилучших практик для решения этой проблемы? Я обнаружил, что добавление отступа размером около 20 пикселей в правую часть div устраняет проблему, предоставляя полосе прокрутки достаточно пространства для перемещения, но, конечно, когда таблица не заполнена достаточным количеством данных, чтобы вызвать переполнение, отступ по-прежнему остается в виде неприглядного пробела размером 20 пикселей. Похоже, существует множество похожих способов решения проблемы (например, добавление пустого столбца таблицы шириной с полосу прокрутки, настройка overflow-y: scroll, при которой ВСЕГДА будет вертикальная полоса прокрутки, или установка жестко заданной ширины во внешней таблице), но все они, похоже, имеют свои преимущества и недостатки. В конечном итоге я написал функцию javascript, которая при загрузке добавляет дополнение к внутренней таблице всякий раз, когда есть вертикальная полоса прокрутки, но мне это действительно кажется излишеством для проблемы, которая, как я думаю, вообще не должна возникать.
ОБНОВЛЕНИЕ: 1) Мне нужно сохранить возможность переполнения по оси y. На странице, помимо таблиц, есть и другие данные, поэтому таблицы должны прокручиваться по вертикали всякий раз, когда для них генерируется слишком много данных. Однако, это, конечно, проблема с горизонтальной прокруткой.
Комментарии:
1. Я не думаю, что это проблема здесь, но зачем использовать этот div? почему бы не поместить свойства в td? РЕДАКТИРОВАТЬ: это была проблема.
Ответ №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>
Комментарии:
1. Похоже, что это приводит к исчезновению всех полос прокрутки, а не только горизонтальной полосы прокрутки. К сожалению, мне нужно, чтобы табличные данные были вертикальной полосой прокрутки всякий раз, когда слишком много элементов данных для видимой области. На этих страницах, помимо этих таблиц, существуют другие функциональные возможности, поэтому высота таблиц ограничена их собственной областью на страницах. Было бы неплохо, если бы я мог просто сказать overflow-x:hidden , но тогда всякий раз, когда табличные данные оказываются очень, очень длинными, данные оказываются скрытыми при переполнении x.
2. В своем первоначальном посте я отметил, что добавление 20 пикселей решает проблему, но на самом деле это всего лишь временная накладка, потому что, когда таблица не заполнена достаточным количеством данных для переполнения, у вас остается пробел в 20 пикселей на той стороне таблицы, где должна быть вертикальная полоса прокрутки. Поскольку в моем случае использования данные генерируются динамически, я ищу решение, которое работает, когда в таблице мало / нет данных или когда их много. Это можно сделать с помощью Javascript, который условно добавляет отступы в зависимости от того, есть вертикальная полоса прокрутки или нет, но мне это кажется излишеством.