сохранение размера и прокрутки вложенных таблиц в HTML/CSS

Question

Я строю относительно сложную страницу с некоторыми вложенными таблицами, которые должны прокручиваться. Несмотря на то, что я читаю как можно больше на HTML-таблицах, я, похоже, не понимаю, что происходит.

См http://jsfiddle.net/JasonJSFiddle/etye72eg/

Я хочу часть верхней панели, чтобы всегда быть 80% от экрана и нижней части, чтобы быть 20% от экрана.

table.outer-table tr.outer-table-row1 { 
    height:80%; 
} 
table.outer-table tr.outer-table-row2 { 
    height:20%; 
} 

я предполагая, поставив «переполнения: авто» в, это сделает вложенные таблицы прокрутки, сохраняя при этом соотношение количества внешней таблицы 80%/20%. Тем не менее, похоже, просто выталкивают ячейки, поэтому верх и низ - по 50%.

Как я могу получить верхнюю часть на 80% экрана, а вложенную таблицу справа для прокрутки, а нижняя часть - 20%, а вложенная таблица внизу - для прокрутки?

Спасибо!

Answer 1

Его обычно не рекомендуется делать с таблицами. Если вы работаете с почтовым маркетингом или каким-то странным браузером, который не поддерживает div.

Я хотел бы сделать макет с дивы с помощью CSS атрибуты:

display: table; 
display: table-row; 
display: table-cell; 

Это дает дивы некоторые возможности компоновки tableish.

Я привел пример для вас с divs here;

Вы можете поместить таблицы, которые действительно необходимы внутри div. Но чтобы использовать процентные размеры, вы должны убедиться, что внешний (внешний) элемент имеет фиксированный размер. (может быть ваш div # main или какая-либо другая внешняя оболочка вашего макета).

Надеюсь, это поможет