JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="club_plan" style="display: block; overflow-x: auto;">
<table border="0" cellpadding="0" cellspacing="0" class="result-set" id="club_plan_table">
<thead>
<tr>
<th>Tag</th>
<th>Datum</th>
<th>Uhrzeit</th>
<th>Liga</th>
<th>Heimmannschaft</th>
<th>Gastmannschaft</th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap>Do.</td>
<td class=" highlightcell" nowrap>Heute</td>
<td nowrap>19:45</td>
<td nowrap>H1KK</td>
<td class=" teams" nowrap>TuS Hiltrup V</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster IV</td>
</tr>
<tr>
<td nowrap>Fr.</td>
<td nowrap>30.09.2016</td>
<td nowrap>19:30</td>
<td nowrap>H3KK</td>
<td class=" teams" nowrap>SC Westfalia Kinderhaus V</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster VI</td>
</tr>
<tr>
<td class="tabelle-rowspan"></td>
<td class="tabelle-rowspan"></td>
<td class=" teams" nowrap title="verlegt, ursprünglicher Termin: 01.10.2016 18:30">20:00 v</td>
<td nowrap>HBL</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster II</td>
<td class=" teams" nowrap>1. TTC Münster III</td>
</tr>
<tr>
<td nowrap>Sa.</td>
<td nowrap>01.10.2016</td>
<td nowrap>18:30</td>
<td class=" teams" nowrap>HNRWL</td>
<td class=" teams highlightcell"...
CSS
/*container */
#club_plan {
overflow-x: auto;
width: 50%;
max-height: 150px;
/* max-height: 177px; if you want the tbody to be 150px max (thead has a height of 27px */
}
thead tr {
position: relative;
}
tbody {
overflow-x: auto;
width: 100%
}
/* decoration */
table {
font: 12px Verdana;
}
td,
th {
padding: 5px;
border: 1px solid #888888;
}