Моя цель - создать макет с фиксированной областью вверху, а затем таблицу (с полосами прокрутки) в оставшейся доступной области.Я упростил это для того, чтобы задать этот вопрос.
Я пытался сделать это, используя div определенного размера (в этом примере 300x300 пикселей), показанный в примере как голубой, он содержиттаблица с двумя строками, верхняя из которых содержит заголовок, а вторая содержит div, который, в свою очередь, содержит таблицу с данными, которые я хочу прокрутить.
table {border-collapse: collapse;}
table,th,td {border: 1px solid gray;}
table.nowrap {white-space: nowrap;}
<html>
<body>
<div style="width:300px; height:300px; background-color: cyan;">
<table>
<tr style="height:40px;background-color: lightblue;">
<td>This is the static header</td>
</tr>
<tr>
<td>
<div style='width:100%; height:100%; overflow:scroll;'>
<table class='nowrap'>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Если вы запустите это, он показывает следующее, но я не понимаю, почему.Высота / ширина 100%, поэтому не должен ли он наследовать размер от родителя?
Если я изменю строку
*От 1019 *
до
<div style='width:300px; height:260px; overflow:scroll;'>
Затем отображается прокручиваемая таблица в пределах div .., что является правильным (или, по крайней мере, тем, что я хочу).Но я не буду знать точный размер, так как экран создается динамически, в разных браузерах и т. Д.
Итак, если я укажуТочная ширина div (в пределах td), а не в процентах, работает нормально - может ли это быть размер от другого родителя, а не от внешнего div?