JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<table border="1">
  <tr>
    <th>head1</th>
    <th>head2</th>
    <th>head3</th>
    <th>head4</th>
  </tr>
</table>
<div class="scroll">
  <table>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>More Text</td>
      <td>More Text</td>
      <td>More Text</td>
      <td>More Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>More Text</td>
      <td>More Text</td>
      <td>More Text</td>
      <td>More Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
   ...

CSS

table {
    margin: 0 1rem;
    background: #fff;
    width: 98%;
    border-spacing: 0 5px;
    border-collapse: separate;
    border-radius: .25rem;
}

thead tr:first-child {
    background: #E84C3D;
    color: #fff;
    border: none;
}

th:first-child,
td:first-child {
    padding: 0 15px 0 20px;
}


tr {
    width: 100%;
    height: 40px;
}

th {
    font-size: 20px;
    border-collapse: separate;
    border-spacing: 5em;
    font-weight: 500;
}

thead tr:last-child th {
    border-bottom: 3px solid #ddd;
}

tbody tr:hover {
    background-color: #f2f2f2;
    cursor: default;
}

tbody tr:last-child td {
    border: none;
}

tbody td {
    border-bottom: 1px solid #ddd;
}

td:last-child {
    text-align: right;
    padding-right: 10px;
}

.scroll {
  max-height: 360px;
  overflow: auto;
}

JavaScript

$('#more-arrows').click(function () {
    var scrollBottom = Math.max($('table').height() - $('tbody').height() / 200 + 1000, 0);
    $('tbody').scrollTop(scrollBottom).animate({
        scrollBottom: 0
    }, 1000);
});