JSFiddle - React, Tailwind, and code Playground
HTML
<div class="outer">
<table id='t1' border='1' class="table-block">
<tbody>
<tr class="table-block-header">
<th class="headcol1">Column1</th>
<th class="headcol2">+</th>
<th class="headcol3">Column2</th>
<th class="table-block-header">10.04.2015</th>
<th class="table-block-header">11.04.2015</th>
<th class="table-block-header">12.04.2015</th>
<th class="table-block-header">13.04.2015</th>
<th class="table-block-header">14.04.2015</th>
<th class="table-block-header">15.04.2015</th>
<th class="table-block-header">16.04.2015</th>
<th class="table-block-header">17.04.2015</th>
<th class="table-block-header">18.04.2015</th>
<th class="table-block-header">19.04.2015</th>
<th class="table-block-header">20.04.2015</th>
<th class="table-block-header">21.04.2015</th>
<th class="table-block-header">22.04.2015</th>
</tr>
<tr>
<td rowspan="2" class="headcol1">
<input type="checkbox" class="x_selector" value="value1">dummy</td>
<td class="headcol2">
<input type="checkbox" class="y_selector" name="VALUE1" value="12345">
</td>
<td class="headcol3">text1</td>
<td>
<div class="div_up"></div>
<div class="div_mid">100.00%</div>
<div class="div_down">0/632</div>
</td>
<td>
<div class="div_up">0.00</div>
<div class="div_mid">100.00%</div>
<div class="div_down">0/199</div>
</td>
<td>
<div class="div_up">0.00</div>
<div class="div_mid">100.00%</div>
<div class="div_down">0/60</div>
</td>
<td>
<div class="div_up">0.00</div>
<div...
CSS
.headcol1 {
position:absolute;
width:5em;
left:0;
top:auto;
}
.headcol2 {
position:absolute;
width:5em;
left:5em;
top:auto;
}
.headcol3 {
position:absolute;
width:5em;
left:10em;
top:auto;
}
.outer {
width: 800px;
overflow-x:scroll;
margin-left:15em;
overflow-y:visible;
padding-bottom:1px;
}