Позиционирование и прокрутка тела таблицы HTML

Question

Как показано на этой скрипке , у меня есть три таблицы на странице. Я хочу, чтобы можно было прокручивать тело "Leaderboard" и "Queue", оставляя заголовок и заголовок таблицы в покое. Желательно без абсолютного позиционирования.

В некотором роде мне также нужен стол (не считая caption, чтобы иметь немного отступов по бокам (но не между отдельными ячейками).

Answer 1

Добавьте overflow: scroll; к своим элементам и включите height.Если вы хотите прокрутить только в одном направлении, вместо этого вы можете сделать overflow-x для горизонтальной прокрутки и overflow-y для вертикальной прокрутки.Чтобы определить, нужно ли прокручивать div, используйте overflow: auto;.

Answer 2

Добавьте overflow: auto; к окружающим DIV, которые вы хотите прокрутить.Возможно, вы захотите установить явные высоты, в зависимости от вашего макета - вам не нужно, но он не будет прокручиваться, если вы этого не сделаете.Вы можете попробовать установить max-height, если хотите, чтобы он растягивался только до определенной точки.Если вам нужна только вертикальная прокрутка, некоторые браузеры поддерживают overflow-y: auto, но не все.

Так как <caption> находится в таблице, вы не можете установить отступ илиполе на столе.Вы можете либо:

• Снять заголовок таблицы и сделать его простым заголовком, например h2, затем добавить поле в таблицу, либо
• Вы можете установить отступы.- слева в ячейках таблицы / столбце и справа - с другой стороны.Не совсем чистый, но позволяет вам сохранять семантику <caption>, если хотите.