Add Scroll Shadows To Wide HTML Tables – TableScrollShadow

Preview:

Description:

A tiny JavaScript responsive table library that adds a scrollbar under the table when the content overflows its container and applies inset shadows to both sides that tell the visitor there are more table columns to scroll.

See Also:

• Add Top & Bottom Shadows To Scrollable Content – jQuery scrollingShadows

How to use it:

1. Load the stylesheet table-scroll-shadow.min.css and JavaScript table-scroll-shadow.min.js in the document.

<link rel="stylesheet" href="dist/table-scroll-shadow.min.css" />
<script src="dist/table-scroll-shadow.min.js"></script>

2. Wrap your HTML table into a DIV container with the CSS class of ‘table-scroll’.

<div class="table-wrapper">
  <div class="table-scroll">
    <table>
      ...
    </table>
  </div>
</div>

3. Initialize the library and set the shadow color & size.

const table = new TableScrollShadow({
      shadowColor: 'rgba(0, 0, 0, 0.25)',
      size: '2em',
})
table.init()

4. Override the default throttle delay. Default: 75.

const table = new TableScrollShadow({
      shadowColor: 'rgba(0, 0, 0, 0.25)',
      size: '2em',
      throttleDelay: 80,
})

5. Override the default CSS selectors.

const table = new TableScrollShadow({
      shadowColor: 'rgba(0, 0, 0, 0.25)',
      size: '2em',
      wrapperClass: '.table-wrapper',
      scrollAreaClass: '.table-scroll',
})