Таблица расширяется за пределы div и области просмотра ⇐ CSS

[Anonymous]

Здесь вы можете увидеть страницу динамической таблицы, на которой большая таблица расширяется по горизонтали над родительским элементом div и областью просмотра, а также небольшую таблицу на этой странице, которая находится внутри родительского элемента div и области просмотра.
Как мне добиться, чтобы большая таблица хорошо вписывалась в область просмотра, чтобы при этом не появлялась горизонтальная полоса прокрутки страницы, но таблица прокручивалась сама по себе?
Я попробовал добавить переполнение: auto и display: table в родительский div, который не сработало, и это:

Код: Выделить всё

table {
width: 100%;
table-layout: fixed;
}

При этом таблица сжималась до размера области просмотра, но все столбцы таблицы были слишком переполнены, что делало содержимое ячеек нечитаемым:


Также пробовал:

Код: Выделить всё

table {
word-break: break-word;
}

Что совершенно нежелательно, поскольку слова выровнены по вертикали.
Таблицы являются динамическими, поскольку столбцы в каждой таблице данных на нашем веб-сайте различаются. поэтому мы не можем установить определенную ширину для каждого столбца.
Нет ли другого способа исправить это, чтобы таблица прокручивалась сама по себе и хорошо вписывалась в область просмотра, при этом страница не отображалась внизу полоса прокрутки?

Подробнее здесь: https://stackoverflow.com/questions/792 ... d-viewport