Использование «overflow: auto» в <table>родительском элементе вызывает раздражающую перенос слов в первом столбце

Question

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

Демонстрация в реальном времени на jsFiddle

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

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

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

Answer 1

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

Answer 2

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

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

div.dialogBody table td,
div.dialogBody table th {
  white-space: nowrap;
}