SCSS

by KhuyenNH

HTML

<div class="wrap">
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>Ticket</th>
          <th>Tracker</th>
          <th>Status</th>
          <th>Priority</th>
          <th>Assignee</th>
          <th>Target version</th>
          <th>Due date</th>
          <th>Estimated time</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="Ticket">#0001</td>
          <td data-label="Tracker">Task</td>
          <td data-label="Status">Resolved</td>
          <td data-label="Priority">Hight</td>
          <td data-label="Assignee">Nguyen Huu Khuyen</td>
          <td data-label="Target version">Sprint 3</td>
          <td data-label="Due date">06/21/2020</td>
          <td data-label="Estimated time">16</td>
        </tr>
        <tr>
          <td data-label="Ticket">#0002</td>
          <td data-label="Tracker">Task</td>
          <td data-label="Status">Resolved</td>
          <td data-label="Priority">Normal</td>
          <td data-label="Assignee">Nguyen Huu Khuyen</td>
          <td data-label="Target version">Sprint 3</td>
          <td data-label="Due date">06/21/2020</td>
          <td data-label="Estimated time">8</td>
        </tr>
        <tr>
          <td data-label="Ticket">#0003</td>
          <td data-label="Tracker">Bug</td>
          <td data-label="Status">Resolved</td>
          <td data-label="Priority">Hight</td>
          <td data-label="Assignee">Nguyen Huu Khuyen</td>
          <td data-label="Target version">Sprint 3</td>
          <td data-label="Due date">06/21/2020</td>
          <td data-label="Estimated time">8</td>
        </tr>
        <tr>
          <td data-label="Ticket">#0004</td>
          <td data-label="Tracker">Task</td>
          <td data-label="Status">Resolved</td>
          <td data-label="Priority">Normal</td>
          <td data-label="Assignee">Nguyen Huu Khuyen</td>
          <td data-label="Target version">Sprint 3</td>
          <td data-label="Due...

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;
  /* width: 70%; */
  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;
  }
}

@media screen and (min-width: 640px) {
  td, th {
    &:first-child {
      position: sticky;
      left: 0;
      z-index: 9;
    }

    &:not(:last-child) {
      border-right: 1px dotted gray;
    }
  }
}

@media screen and (max-width: 640px) {
  table {
    min-width: auto;

    thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    tr {
      display: block;

      &:not(:last-child) {
        border-bottom: 2px solid #8e3c78;
      }

      &:nth-child(even) {
        td {
          background: #fff;
        }
      }

      td {
        display: block;
        font-size: 14px;
        text-align: right;
        border-bottom: 1px solid #ddd;

        &:before {
          content: attr(data-label);
          float: left;
          font-weight: bold;
          text-transform: uppercase;
        }

        &:last-child {
          border-bottom: 0;
        }
      }
    }
  }
}

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

::-webkit-scrollbar-track {
  background:...