JSFiddle - React, Tailwind, and code Playground

by KhuyenNH

HTML

<div class="wrap">
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>Cột title</th>
          <th>Hích đờ</th>
          <th>Hích đờ</th>
          <th>Hích đờ</th>
          <th>Hích đờ</th>
          <th>Hích đờ</th>
          <th>Hích đờ</th>
          <th>Hích đờ</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row title</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
        </tr>
        <tr>
          <td>Row title</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
        </tr>
        <tr>
          <td>Row title</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
        </tr>
        <tr>
          <td>Row title</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
        </tr>
        <tr >
          <td class="text-nowrap">Row title long text...</td>
          <td>Row title</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
          <td>cell content</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="wrap">
  <div class="container">
    <table class="table-footer">
      <tbody>
        <tr>
          <td>Sum sum sum</td>
          <td>cell content</td>
        ...

SCSS

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
  box-sizing: border-box;
}

body {
  padding: 40px;
  height: 100vh;
  background-image: linear-gradient(-225deg, #A445B2 0%, #D41872 52%, #FF0066 100%);
  font-family: 'Roboto', sans-serif;
}

.wrap {
  flex: 1;
  margin: auto;
  margin-bottom: 5px;
  border: 1px solid #36304a;
  border-radius: 5px;
  overflow: hidden;
}

.container {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.text-nowrap {
  white-space: nowrap;
}

table {
  width: 100%;
  min-width: 1000px;
  
  tr {
    &:not(:last-child) {
      td {
        border-bottom: 1px solid gray;
      }
    }
    
    &:nth-child(even) {
      td {
        background: #ffc7f8;
      }
    }
  }
  
  td {
    padding: 10px 20px;
    background: #ffedfd;
  }
  
  th {
    padding: 20px;
    color: white;
    background: #36304a;
    white-space: nowrap;
    text-align: center;
  }
  
  td, th {
    &:first-child {
      position: sticky;
      left: 0;
      z-index: 9;
    }
    
    &:not(:last-child) {
      border-right: 1px dotted gray;
    }
  }
}

// customize scroll cho đẹp
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: white;
}

::-webkit-scrollbar-thumb {
  background: #36304a;
}

JavaScript

var firstTableWidth = [];

$('table th').each(function(i, item) {
  firstTableWidth.push($(this).width());
});

$('.table-footer td').each(function(i, item) {
  $(this).width(firstTableWidth[i]);
});

// Đồng bộ scroll
$(".container").on("scroll", function() {
  $(".container:not(this)").scrollLeft($(this).scrollLeft());
});