Полосы прокрутки таблицы css

Широкие и длинные таблицы на веб странице потенциальному клиенту может быть тяжело просматривать. Что же делать? На помощь придут полосы прокрутки (горизонтальные и вертикальные).

Итак, задача. Есть такая длинная и широкая таблица из более чем 100 позиций. Просматривать ее неудобно и по ширине она уходит за границы экрана.

Как добавить полосы прокрутки?

Вставляем в нужный файл стилей .css следующий код:

table {
    width: 100%;
    display:block;
}
thead {
    display: inline-block;
    width: 100%;
    height: 20px;
}
tbody {
    height: 600px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}

У меня Word Press, поэтому я могу добавить в дополнительные стили в текущей теме Настроить-Дополнительные стили и вставляем наш код. Высоту таблицы можете взять на 600, а другую

В html ничего добавлять не надо! Теперь смотрим, как выглядит наша табличка

А вот и она!

Появились полосы внизу и справа! Надеюсь, у Вас тоже все получилось. Подпишитесь, чтобы узнать еще больше полезной информации!