JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer-container">
<div class="container">
<table class="table-list scrollable">
    
    <thead>
        <tr>
            <th>Hover the value</th>
            <th>Second</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        
         
        <tr>
            <td>Value hover cant be shown</td>
            <td>2015-01-01</td>
            <td><div class="points-wrapper">
                            <span class="points-red tooltip-left" data-tooltip="Here is the hover tests">5</span>
                        </div></td>
        </tr>
        
          <tr>
            <td>Value hover is barely shown</td>
            <td>2015-01-01</td>
            <td><div class="points-wrapper">
                            <span class="points-red tooltip-left" data-tooltip="Here is the hover tests">5</span>
                        </div></td>
        </tr>
        
        
        <tr>
            <td>The value hover below this row is shown</td>
            <td>2015-01-01</td>
            <td>5</td>
        </tr>
        
        
        <tr>
            <td>Something is named</td>
            <td>2015-01-01</td>
            <td>2</td>
        </tr>
        
        
        <tr>
            <td>Some long long long name</td>
            <td>2015-01-01</td>
            <td><div class="points-wrapper">
                            <span class="points-red tooltip-left" data-tooltip="Here is the hover tests">5</span>
                        </div></td>
        </tr>
        
          <tr>
            <td>Some long long long name</td>
            <td>2015-01-01</td>
            <td><div class="points-wrapper">
                            <span class="points-red tooltip-left" data-tooltip="Here is the hover tests">5</span>
                        </div></td>
        </tr>
          <tr>
            <td>Some long long long name</td>
            <td>2015-01-01</td>
            <td><div class="points-wrapper">
                            <span...

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.outer-container {
  width: 30em;
}
.container {
    margin: 0 .2em .2em .2em;
    background-color: #ffffff;
    min-height: 26em;
    padding: 0 0 2.2em 0;
    position: relative;
}

table {
    border-collapse: seperate;
    border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  float: none !important;
}

.scrollable {
    width: 100%
}

.scrollable thead tr {
      background-color: #f4f4f4;
      display: block;
}

.scrollable thead tr th {
  height: 30px;
  line-height: 30px;
}

.scrollable thead tr th:first-child {
  width: 100%;
}

.scrollable thead tr th:nth-child(2) {
  min-width: 6em;
}

.scrollable thead tr th:nth-child(3) {
  min-width: 4em;
}


.scrollable thead tr th {
  height: 30px;
  line-height: 30px;
}

.table-list th, .table-list td {
  line-height: 1.8;
  padding-left: .8em;
}

.table-list th:last-child, .table-list td:last-child {
  padding-right: .8em;
}

.scrollable tbody, .scrollable thead {
  display: block;
}

.scrollable tbody {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: overlay;
}

.table-list td {
  line-height: 1.8;
  padding-left: .8em;
}
.scrollable tbody tr td:first-child {
  width: 100%;
}

.scrollable tbody tr td:nth-child(2) {
  min-width: 6em;
}

.scrollable tbody tr td:nth-child(3) {
  min-width: 4em;
}

table td {
  vertical-align: top;
}

caption, th, td {
      text-align: left;
      font-weight: normal;
      float: none !important;
}
/* below...