examples/table-content.html

<!DOCTYPE html>
<html>
  <head>
    <link href="../css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/perfect-scrollbar.js"></script>
    <style>
      #table {
        font-size: 20px;
      }
      #table thead, #table tbody, #table tr {
        display: block;
        width: 600px;
        border-spacing: 0;
        border-collapse: collapse;
      }
      #table tbody {
        height: 100px;
        overflow-y: auto;
        overflow-x:hidden;
        position: relative;
        border-bottom: 1px solid black;
      }
      #table tbody td, #table thead th {
        display: block;
        border: 1px solid black;
        width: 200px;
        float: left;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div id="table" class="wrapper">
      <table id='table'>
        <thead>
          <tr>
            <th>Name</th><th>Age</th><th>Occupation</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Alex</td><td>20</td><td>Student</td>
          </tr>
          <tr>
            <td>Paul</td><td>23</td><td>Engineer</td>
          </tr>
          <tr>
            <td>Chris</td><td>19</td><td>Human being</td>
          </tr>
          <tr>
            <td>Satoshi</td><td>30</td><td>Pokemon trainer</td>
          </tr>
          <tr>
            <td>Jun</td><td>27</td><td>Hero</td>
          </tr>
          <tr>
            <td>Yong</td><td>27</td><td>Money maker</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script>
    new PerfectScrollbar('#table tbody');
    </script>
  </body>
</html>