Липкий горизонтальный скролл для таблицы

Всем добра! Подскажите пожалуйста, есть вообще возможность сделать липкий горизонтальный скролл у таблицы? Есть большая таблица, снизу есть горизонтальный скролл, собственно, чтобы прокрутить таблицу в сторону, надо сначала промотать вниз до конца таблицы, передвинуть скроллинг, вернутся вверх, найти нужную строку, в общем неудобно... А так бы скроллинг всегда был снизу экрана, можно листать туда-сюда в любом месте Пытаюсь сделать, как здесь но чёт не выходит:

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>
<br><br><br><br>

Стили

body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
  height:50px; background:#aaa;
}
.main-content{
  min-height:1000px;
}

.main-footer{position:-webkit-sticky; position:sticky; bottom:0; border-color:red;}

Источник: https://codepen.io/elad2412/pen/MZZVjw

Добавил в оба класса, но изменений нет, что я делаю не так?

Либо какой-то может есть вариант, чтобы можно было двигать таблицу вправо/влево курсором мыши? Курсор типа cursor:grab, но это меняет только внешний вид курсора, без добавления функционала сдвигания таблицы