JSFiddle - React, Tailwind, and code Playground
by Sebastian Kay
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.4.1/darkly/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<table class="table table-dark">
<thead>
<tr>
<th colspan="8">
</th>
<th colspan="6">Armor Effectiveness against Class
</th>
</tr>
<tr>
<th>Caliber
</th>
<th>Name
</th>
<th>Flesh<br>damage
</th>
<th>Penetration<br>power
</th>
<th>Armor<br>damage %
</th>
<th>Accuracy<br>%
</th>
<th>Recoil<br>%
</th>
<th>Fragmentation<br>chance*
</th>
<th>1
</th>
<th>2
</th>
<th>3
</th>
<th>4
</th>
<th>5
</th>
<th>6
</th>
</tr>
<tr>
<th class="headerSort" tabindex="0" role="columnheader button" title="Sort ascending">
</th>
<th class="headerSort" tabindex="0" role="columnheader button" title="Sort ascending">
</th>
<th class="headerSort" tabindex="0" role="columnheader button" title="Sort ascending">
</th>
<th class="headerSort" tabindex="0" role="columnheader button" title="Sort ascending">
</th>
<th class="headerSort" tabindex="0" role="columnheader button" title="Sort ascending">
</th>
<th class="headerSort" tabindex="0" role="columnheader button" title="Sort ascending">
</th>
<th class="headerSort" tabindex="0" role="columnheader button" title="Sort ascending">
</th>
<th class="headerSort" tabindex="0" role="columnheader button" title="Sort ascending">
</th>
<th class="headerSort" tabindex="0" role="columnheader button" title="Sort ascending">
</th>
<th class="headerSort" tabindex="0" role="columnheader button" title="Sort ascending">
</th>
...