JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class=container>
<div class=row>
<div class=col-sm-12>
<div class="table-responsive">
<table class="table table-condensed table-bordered table-hover fixed_headers">
<thead>
<tr>
<th rowspan="2" style="width: 10px"><span class="text-muted">#</span></th>
<th rowspan="2">ID</th>
<th rowspan="2">Name</th>
<th colspan="4">r 1</th>
<th colspan="4">r 2</th>
<th rowspan="2" ng-click="sortTableBy('recognized')" class="change-sort-order">ERK
</th>
<th rowspan="2">ERW
</th>
<th rowspan="2"><span class="text-muted">Radar</span></th>
<th rowspan="2"><span class="text-muted">RISS</span></th>
</tr>
<tr>
<th>
A 1
</th>
<th>
A 2
</th>
<th>
A 3
</th>
<th>
A 4
</th>
<th>
A 1
</th>
<th>
A 2
</th>
<th>
A 3
</th>
<th>
A 4
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
...
CSS
thead {
display: table;
width: calc( 100% - 1em );
table-layout: fixed;
}
tbody {
display: block;
height: 240px;
overflow: auto;
}