Использование overflow: auto on ‹table› родительского элемента вызывает раздражающий перенос слов в первом столбце

На моем веб-сайте есть таблицы, вложенные в абсолютно позиционированные перетаскиваемые диалоговые окна, которые отображаются / скрываются в зависимости от некоторых действий пользователя. Стоит отметить, что в этих таблицах есть table-layout: auto; и width: auto;. Возникла проблема, когда в таблице было столько строк, что они выходили за нижний край экрана. Это вызвало проблемы с перетаскиванием, поскольку мы ограничили перетаскивание краями области просмотра. Чтобы решить эту проблему, я заключил таблицу в <div> и установил на ней max-height: 400px; overflow: auto;. Это дает пользователю красивую вертикальную полосу прокрутки всякий раз, когда таблица превышает максимальную высоту. Это работает, но по какой-то причине браузер (как IE, так и Chrome) не принимает во внимание ширину полосы прокрутки, поэтому каждый раз, когда высота таблицы превышает максимальное значение и вызывает переполнение, таблица скручивается влево. и к некоторым ячейкам в первом столбце применен очень уродливый перенос слов. Без комбинации переполнения / максимальной высоты ширина таблицы рассчитывается правильно и переполнения нет.

Живая демонстрация на jsFiddle

Я нашел два способа обойти это, оба из которых неосуществимы ...

  1. Явно установите ширину для каждой из ячеек (или используйте table-layout: fixed)
  2. Используйте overflow-y: scroll; вместо auto, при котором полоса прокрутки отображается всегда, даже если она не нужна. Что еще хуже, так это то, что overflow-y является свойством CSS3.

Должно быть лучшее решение! Как я могу получить вертикальную полосу прокрутки на родительском элементе моей таблицы без переноса слов?


html css word-wrap css-tables
person Josh Stodola    schedule 21.06.2011    source источник
comment
Поскольку и IE, и Chrome ведут себя одинаково, я предполагаю, что они правильно следуют спецификации. Я не пытаюсь спорить со спецификацией, я просто пытаюсь достичь желаемого результата, насколько это возможно.   -  person Josh Stodola    schedule 22.06.2011
comment
если есть какой-то рельеф, всегда можно уменьшить ширину полосы прокрутки. большинство пользователей используют колесико / жесты мыши, а те, кому нужна полоса прокрутки, могут легко найти полосу прокрутки шириной 5 пикселей. просто говорю.   -  person Achshar    schedule 22.06.2011
comment
@Achstar Измените ширину полосы прокрутки ?! Это настройка ОС, не так ли?   -  person Josh Stodola    schedule 22.06.2011

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете попробовать применить white-space: nowrap; к своей таблице, но вам, вероятно, потребуется явно настроить ширину div.dialog, если вы не хотите, чтобы появлялись горизонтальные полосы прокрутки.

person kei    schedule 21.06.2011
comment
Ага! Это действительно создает горизонтальную полосу прокрутки. Однако я думаю, что знаю почему. Я думаю, это потому, что браузер снова не принимает во внимание ширину полосы прокрутки. Итак, если я добавлю отступ к родительской таблице, чтобы учесть эту ширину, тогда это решение отлично работает! +1 Я скоро опубликую полный ответ - person Josh Stodola; 22.06.2011

arrow_upward
1
arrow_downward

Разобрался, отчасти благодаря ответ Кей. Использование white-space: nowrap; действительно предотвращает перенос текста, но вызывает появление горизонтальной полосы прокрутки (демонстрация) . Чтобы удалить горизонтальную полосу прокрутки, я просто применил 18 пикселей правого отступа к родительской таблице, и теперь все работает идеально (demo < / а>). Спасибо всем, кто помог!

div.dialogBody {
  overflow: auto;
  padding-right: 18px;
  max-height: 400px;
}

div.dialogBody table td,
div.dialogBody table th {
  white-space: nowrap;
}
person Josh Stodola    schedule 21.06.2011