Table

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
      <th>Hobby</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alen</td>
      <td>33</td>
      <td>Japan</td>
      <td>Dance, playing music, skateboard, snowboard</td>
    </tr>
    <tr>
      <td>2</td>
      <td>May</td>
      <td>25</td>
      <td>New Zealand</td>
      <td>Sing a song</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Lena</td>
      <td>40</td>
      <td>Cyprus</td>
      <td>Travel, foods, cooking, yoga, training, reading books, chatting, playing games, exploring, many many hobbies!!</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Tom</td>
      <td>60</td>
      <td>Brazil</td>
      <td>Farming</td>
    </tr>
  </tbody>
</table>
<div class="table-footer">
  <div class="per-page-box">
    <p class="txt">Rows per page:</p>
    <select class="select" name="">
      <option value="">50</option>
      <option value="">100</option>
      <option value="">200</option>
    </select>
  </div>
  <div class="pagination-box">
    <p class="txt">1 - 4 of 50</p>
    <a class="prev">Prev</a>
    <a class="next">Next</a>
  </div>
</div>

<table class="table stripe">
  ...
</table>

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

<div class="scroll-table" data-sticky="thead" style="height: 120px;">
  <table class="table stripe">
    ...
  </table>
</div>

<div class="scroll-table" data-sticky-column="2">
  <table class="table stripe">
    ...
  </table>
</div>

> npm i @noknow/web-design-table

@import '/YOUR_PROJECT/node_modules/@noknow/web-design-table/style.css';

import { Table } from '/YOUR_PROJECT/node_modules/@noknow/web-design-table/index.js';