Как прокрутить таблицу вниз до ее нижней части на экране?

Как настроить горизонтальный скролл внутри блока с таблицей для удобства использования, чтобы не приходилось прокручивать страницу до самого низа таблицы?
  • 11 мая 2024 г. 11:10
Ответы на вопрос 2
Для прокрутки таблицы вниз до ее нижней части на экране можно использовать функцию scrollIntoView() на последней строке или ячейке таблицы. Например:

```html
<table>
  <!-- содержимое таблицы -->
  <tr><td>Строка 1</td></tr>
  <tr><td>Строка 2</td></tr>
  <!-- ... много других строк ... -->
  <tr id="lastRow"><td>Последняя строка</td></tr>
</table>

<script>
document.getElementById('lastRow').scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
</script>
```

Чтобы настроить горизонтальный скролл внутри блока с таблицей, можно использовать CSS свойство `overflow-x: auto;`, которое добавит горизонтальный скролл при необходимости. Например:

```css
.table-container {
  width: 100%; /* или любая другая ширина */
  overflow-x: auto;
}

table {
  width: 100%; /* ширина таблицы равна ширине ее контейнера */
}
```

Если таблица не помещается в блок, будет добавлен горизонтальный скролл для удобства прокрутки содержимого таблицы.
Попробуй ограничить высоту таблицы и сделать для нее вертикальный скролл (max-height: 90vh; overflow: scroll;). Таким образом в пределах экрана всегда будет виден низ таблицы
Похожие вопросы