JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Fonts en Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- JQuery and Bootstrap.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<!-- 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 style="position: fixed;">
<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>
...