JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.css">
<script src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.js"></script>
<div class="container">
  <table id="example" class="display nowrap">
    <thead>
      <tr>
        <th class="tdStatistikenUeberschrift">Rang</th>
        <th class="tdStatistikenUeberschrift">Saison</th>
        <th class="tdStatistikenUeberschrift">Spiele</th>
        <th class="tdStatistikenUeberschrift">Erzielte Tore</th>
        <th class="tdStatistikenUeberschrift">Gegen-<br>tore</th>
        <th class="tdStatistikenUeberschrift">Tor-<br>differenz</th>
        <th class="tdStatistikenUeberschrift">Tor-<br>summe</th>
        <th class="tdStatistikenUeberschrift">Siege</th>
        <th class="tdStatistikenUeberschrift">Unent-<br>schieden</th>
        <th class="tdStatistikenUeberschrift">Nieder-<br>lagen</th>
        <th class="tdStatistikenUeberschrift">Punkt-<br>summe</th>
      </tr>

      <tr>
        <th class="tdStatistikenUeberschrift">Rang</th>
        <th class="tdStatistikenUeberschrift">Saison</th>
        <th class="tdStatistikenUeberschrift">Spiele</th>
        <th class="tdStatistikenUeberschrift">Erzielte Tore</th>
        <th class="tdStatistikenUeberschrift">Gegen-<br>tore</th>
        <th class="tdStatistikenUeberschrift">Tor-<br>differenz</th>
        <th class="tdStatistikenUeberschrift">Tor-<br>summe</th>
        <th class="tdStatistikenUeberschrift">Siege</th>
        <th class="tdStatistikenUeberschrift">Unent-<br>schieden</th>
        <th...

CSS

body {
  width: 85%;
  margin: 0 auto;
  padding: 0;
  border: 0;
}


* {
  font: normal 10pt Tahoma, Verdana, sans-serif;
  color: #8A2C2C;
  background: #F8F8F8;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


.statistiken_float {
  float: left;
  width: 220px;
  height: 320px;
  padding: 10px;
  text-align: left;
}

.statistiken_ueberschrift {
  padding: 5px;
  text-indent: 2em;
}

.statistiken_einrueckung {
  padding: 5px 5px 5px 30px;
}


.statistiken_table {
  table-layout: fixed;
  width: 100%;
  border: 0px solid #8A8A8A;
  border-spacing: 2px;
  empty-cells: hide;
  caption-side: bottom;

}

.tdStatistikenErsteSpalte {
  text-align: left;
  font: bold 10pt Tahoma, Verdana, sans-serif;
  height: 0px;
  width: 60%;
  padding: 5px 0px 5px 0px;
  border: 0px solid #8A8A8A;
}

.tdStatistikenUeberschrift {
  text-align: right;
  font-weight: bold;
  height: 0px;
  padding: 5px;
  border: 1px solid #8A8A8A;
}

.tdStatistiken {
  text-align: right;
  font: normal 10pt Tahoma, Verdana, sans-serif;
  padding: 5px;
  border: 1px solid #8A8A8A;
}

.tdStatistikenUnterschrift {
  text-align: center;
  height: 0px;
}

.bold {
  font-weight: bold;
}

JavaScript

$(document).ready(function() {
  var table = $('#example').DataTable({

    dom: 'Blfrtip', // kein Effekt
    buttons: [{ // kein Effekt
        extend: 'pageLength',
        text: 'Anzahl Zeilen'
      },
      { // kein Effekt
        extend: 'colvis',
        text: 'Spalten ein/ausblenden'
      }
    ],
    lengthMenu: [
      [-1, 10],
      ["Alle", 10]
    ],

    fixedHeader: true, // kein Effekt

    language: {
      processing: "Bitte warten...",
      loadingRecords: "Wird geladen...",
      search: "Suchen",
      info: "_START_ bis _END_ von _TOTAL_ Eintr&auml;gen",
      infoEmpty: "Keine Daten",
      lengthMenu: '<select>' +
        '<option value="10">10</option>' +
        '<option value="-1">Alle</option>' +
        '</select> Eintr&auml;ge',
      infoFiltered: "(gefiltert von _MAX_ Eintr&auml;gen)",
      infoPostFix: "",
      zeroRecords: "Keine Eintr&auml;ge",
      paginate: {
        first: "Erste",
        previous: "Zur&uuml;ck",
        next: "N&auml;chste",
        last: "Letzte"
      }
    },
           initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $("#example thead tr:eq(0) th").eq(column.index()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' );
                } );
            } );
        }

  });
  


})