JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<table style="">
  <colgroup></colgroup>
  <thead>
    <tr>
      <th>c1</th>
      <th>c2</th>
      <th>c3</th>
      <th>c4</th>
      <th>c5</th>
    </tr>
  </thead>
  <tbody>
    <tr aria-hidden="true">
      <td style="padding:0;border:0;height:0">
        <div style="height:0;overflow:hidden">1</div>
      </td>
      <td style="padding:0;border:0;height:0">
        <div style="height:0;overflow:hidden">2</div>
      </td>
      <td style="padding:0;border:0;height:0">
        <div style="height:0;overflow:hidden">3</div>
      </td>
      <td style="padding:0;border:0;height:0">
        <div style="height:0;overflow:hidden">4</div>
      </td>
      <td style="padding:0;border:0;height:0">
        <div style="height:0;overflow:hidden">5</div>
      </td>
    </tr>
    <tr>
      <td class="cell" style="text-align: center;">
        <div><img style="margin-top: -3px;" src="https://cdn.coinglasscdn.com/static/exchanges/270.png" class="css-1ifhear">
        </div>
      </td>
      <td class="cell" style="text-align: center;">
        <div>
          <div>11-13</div>
          <div>10:18</div>
        </div>
      </td>
      <td class="cell" style="text-align: center;">
        <div>CHZUSDT</div>
      </td>
      <td class="cell" style="text-align: center;">
        <div>
          <div>$6.00K</div>
          <div>≈30797CHZ</div>
        </div>
      </td>
      <td class="cell" style="text-align: center;">
        <div>
          <div>$0.19485</div>
          <div>Long</div>
        </div>
      </td>
    </tr>
    <tr class="table_row">
      <td class="cell" style="text-align: center;">
        <div><img style="margin-top: -3px;" src="https://cdn.coinglasscdn.com/static/exchanges/270.png" class="css-1ifhear">
        </div>
      </td>
      <td class="cell" style="text-align: center;">
        <div>
          <div>11-13</div>
          <div>10:18</div>
        </div>
      </td>
      <td class="cell" style="text-align: center;">
       ...

CSS

body,
table,
tbody {
  background: linear-gradient(#7ad1ff, #3a99de) fixed;
  font-family: 'Rubik', sans-serif;
  margin: 0;
  padding: 0;
}

tr {
  width: calc(100vw - 25px);
  margin-left: 10px;
  margin-right: 15px;
  margin-top: 1vw;
  background: #fff;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(5, calc(20vw - (25px / 5)));
  justify-items: center;
  align-items: center;
  font-size: 12px;
}

td {
  padding: 5px;
  padding-top: 7px;
  padding-bottom: 5px;
  color: black;
  text-align: center
}

tr td img {
  vertical-align: middle;
  width: calc(100vw / 20);
  height: calc(100vw / 20);
}

JavaScript

function sortTable(table, col, reverse) {
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
        tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
        i;
    reverse = -((+reverse) || -1);
    tr = tr.sort(function (a, b) { // sort rows
        return reverse // `-1 *` if want opposite order
            * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
                .localeCompare(b.cells[col].textContent.trim())
               );
    });
    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}

function makeSortable(table) {
    var th = table.tHead, i;
    th && (th = th.rows[0]) && (th = th.cells);
    if (th) i = th.length;
    else return; // if no `<thead>` then do nothing
    while (--i >= 0) (function (i) {
        var dir = 1;
        th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
    }(i));
}

function makeAllSortable(parent) {
    parent = parent || document.body;
    var t = parent.getElementsByTagName('table'), i = t.length;
    while (--i >= 0) makeSortable(t[i]);
}

window.onload = function () {makeAllSortable();};