JSFiddle - React, Tailwind, and code Playground

HTML

<table class="overzicht scroll" id="table" style="width: 80%;">
  <thead>
    <tr style="cursor: hand;">
      <th style="width: 10%;">Allemaal</th>
      <th style="width: 18%;">Datum</th>
      <th style="width: 16%;" class="left">Naam</th>
      <th style="width: 10%;" class="left">Bedrijf</th>
      <th style="width: 22%;" class="left">Email</th>
      <th style="width: 14%;" class="left">SMS</th>
      <th style="width: 10%;">Geblokkeerd</th>
    </tr>
  </thead>
  <tbody>

    <tr class="cus1">
      <form method="post"></form>
      <td style="width: 10%;">
        <select onchange="this.form.submit()" name="alles">
          <option value="Ja" selected="">Ja</option>
          <option value="Nee">Nee</option>

          <input type="hidden" name="ID" value="39">
          <input type="hidden" name="A" value="0">
          <p style="display:none;">0</p>
      </td>

      <td style="width: 18%;">
        19-01-2017 10:28
      </td>
      <td style="width: 16%;" class="left">
        Testpersoon
      </td>
      <td style="width: 10%;" class="left">
        test
      </td>
      <td style="width: 22%;" class="left">
        [email protected]
      </td>
      <td style="width: 14%;" class="left">

      </td>
      <form method="post"></form>
      <td style="width: 10%;">
        <select onchange="this.form.submit()" name="geblokkeerd">
          <option value="Ja" selected="">Ja</option>
          <option value="Nee">Nee</option>
        </select>
        <input type="hidden" name="IDS" value="39">
        <input type="hidden" name="B" value="1">
        <p style="display:none;">1</p>
      </td>
    </tr>

    <tr class="cus1">
      <td style="width: 10%;">
        <select onchange="this.form.submit()" name="alles">
          <option value="Ja">Ja</option>
          <option value="Nee" selected="">Nee</option>
        </select>
        <input type="hidden" name="ID" value="38">
        <input type="hidden" name="A" value="0">
        <p...

CSS

table {
  border-collapse: collapse;
  width: 80%;
  margin: auto;
  background: #fff;
  text-align: center;
}
tbody{
  position:absolute;
  max-height:200px;
  overflow-y:auto;
}
td,
th {
  padding: 0.75em 0.5em;
  text-align: center;
}

td.err {
  background-color: #e992b9;
  color: #fff;
  font-size: 0.75em;
  text-align: center;
  line-height: 1;
}

th {
  background-color: #7fb030;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  text-align: center;
}

tbody th {
  background-color: #7fb030;
  text-align: center;
}

tbody tr:nth-child(2n-1) {
  background-color: #f5f5f5;
  transition: all .125s ease-in-out;
}

.overzicht tr:hover {
  background-color: rgba(129, 208, 177, .3);
}

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();
};