Как сделать мобильную таблицу с градиентом?

Question

[IIIu6ko]

Подскажите пожалуйста как добиться такого эффекта?

При скролле само собой градиент начинает пропадать.

UPD:
До меня только что дошло, что можно этот градиент показывать, пока до конца таблицы не пролистают.
Подскажите как на jquery такое реализовать.
Ну а градиент это какой-нибудь after поверх таблицы.

Answer 1

[IIIu6ko]

Сам сообразил)

gradientTable();

  $(window).resize(function() {
    gradientTable();
  });

  function gradientTable() {
    var tableWidth = $(".table--delivery-method").width();
    var windowSize = $(window).width();
    var widthGradient = $(".table__gradient").width();
    var widthWindowWithoutIndentation = windowSize / 100 * 5;
    var primaryPositionGradient = windowSize - widthWindowWithoutIndentation - widthGradient;
    $(".table__gradient").css("left", primaryPositionGradient + "px");

    $(".table__box").scroll(function() {
      if($(this).scrollLeft() >= (tableWidth - windowSize + widthWindowWithoutIndentation)) {
        $(".table__gradient").fadeOut();
      }
      else {
        $(".table__gradient").fadeIn();
        $(".table__gradient").css("left", primaryPositionGradient + $(this).scrollLeft() + "px");
      }
    });
  }