JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://github.com/DataTables/Plugins/blob/master/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="https://github.com/DataTables/Plugins/blob/master/integration/bootstrap/3/dataTables.bootstrap.js"></script>
 <table class="table table-bordered" id="tableOverview">
        <thead>
            <tr>
                <th class="options">
                   Optionen
                </th>              
                <th>     
                    Anwendung
                    <button type="button" class="sortButton btn btn-default btn-xs" title="Sortieren"> 
                        <span class="glyphicon glyphicon-transfer"></span>                            
                    </button>
                </th>
                <th>     
                    Beschreibung
                    <button type="button" class="sortButton btn btn-default btn-xs" title="Sortieren"> 
                        <span class="glyphicon glyphicon-transfer"></span>                            
                    </button>
                </th>
                <th>     
                   Nutzer
                    <button type="button" class="sortButton btn btn-default btn-xs" title="Sortieren"> 
                        <span class="glyphicon glyphicon-transfer"></span>                            
                    </button>
                </th>
                <th>     
                    Verantwortlicher
                    <button type="button" class="sortButton btn btn-default...

CSS

/* tags */

caption
{
    text-align: left;
    font-size: large;
    margin-bottom: 3%;
}

th
{
    white-space: nowrap;
    background-color: white !important;
}

td
{
    font-size: smaller;
} 

tr:nth-of-type(odd) 
{
    background-color: #fcf3d5;
}

/* classes */

.bold
{
    font-weight: bold;
}

.container
{
    min-width: 100%;
}

.content
{
    margin-left: 20px;
    margin-right: 20px;
}

.contentWrapper
{
/*    margin-top: 65px;*/
    margin-top: 20px;
    max-height: 730px;
    margin-left: 20px;
    margin-right: 20px;
    overflow: auto;
}


.detailView td
{
    max-width: 390px;
}

.detailViewHeading
{
    margin-top: -25px;
    padding-bottom: 5px;
    padding-top: 20px;
    height: 50px;
    background: white;
    position: fixed;
    z-index: 99;
    width: 100%;
}

.detailViewHeading span
{
    color: #c09853;
}

.detailViewEntity caption
{
    font-size: medium;
    font-weight: bold;
    margin-bottom: 0;
}

.detailViewEntity table
{
    margin-left: 20px;
}

.detailViewEntityHeading
{
    text-align: center;
    margin-top: 5%;
    margin-bottom: 1%;
}

.detailViewDetailButton
{
    width: 35px;
}

.entity
{
    margin-top: 30px;
    margin-bottom: 20px;
    float:left; 
    border: 1px #cccccc solid;
    padding: 3px 3px 4px 4px;
    width: 100%;
}

.entityFooter
{
    float: left;
    width: 100%;
}

.entityHeading
{
    width: 100%;
    margin-top: -35px;
    padding-bottom: 15px;
    padding-top: 20px;
    height: 50px;
    background: white;
    position: fixed;
    z-index: 99;
}

.entityHeading span
{
    color: #c09853;
}

.entityPopup
{
    width: 50%;
    float: right;
    margin-bottom: 0px;
    margin-top: -3px;
    margin-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: none;
    text-align: center;
}

.grid12
{
    width: 100%;
    float: left;
}

.grid6
{
    width: 50%;
    float: left;
}

.grid5
{
    width: 48.5%; /*48.1012658%;*/
    float: left;
}

.grid2
{ 
    float: left;
    position: relative;
...

JavaScript

$(document).ready(function(){ 
    
 var height = ($(window).innerHeight() - 180);
 
    var oTable = $('#tableOverview').dataTable({
        "oLanguage": {
            "sProcessing":   "Bitte warten...",
            "sLengthMenu":   "_MENU_ Einträge anzeigen",
            "sZeroRecords":  "Keine Einträge vorhanden.",
            "sInfo":         "_START_ bis _END_ von _TOTAL_ Einträgen",
            "sInfoEmpty":    "0 bis 0 von 0 Einträgen",
            "sInfoFiltered": "(gefiltert von _MAX_  Einträgen)",
            "sInfoPostFix":  "",
            "sSearch":       "Suchen",
            "sUrl":          "",
            "oPaginate": {
                "sFirst":    "Erster",
                "sPrevious": "Zurück",
                "sNext":     "Nächster",
                "sLast":     "Letzter"
            }
        },
        "sScrollY": height,
        "sScrollX": "99%",
        "bPaginate": false   
    });
    new FixedColumns( oTable, {
        "iLeftColumns": 3
    } );       
});