JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/13178039/datatables-fixed-headers-misaligned-with-columns-in-wide-tables/38038577#38038577

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.js"></script>
<fieldset class="">
    <legend>Grid: </legend>
    <table class="standard-grid1 full-width content-scrollable" id="PeopleIndexTable">
        <thead>
            <tr>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test this thing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test thisthing</th>
                <th>test this thing</th>
                <th>test this thing</th>
      ...

CSS

.standard-grid, .standard-grid td, .standard-grid th {
    border: solid black thin;
}
.standard-grid1, .standard-grid1 td, .standard-grid1 th {
    border: solid black thin;
}

.full-width {
    width: 50%;
}
 .content-scrollable{
    overflow: auto;
}

JavaScript

$(document).ready(function() {
    var stdTable1 = $(".standard-grid1").dataTable({
        "iDisplayLength": -1,
        "bPaginate": true,
        "iCookieDuration": 60,
        "bStateSave": false,
        "bAutoWidth": true,
        "bScrollAutoCss": true,
        "bProcessing": true,
        "bRetrieve": true,
        "bJQueryUI": true,
        //"sDom": 't',
        "sDom": '<"H"CTrf>t<"F"lip>',
        "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
        "sScrollY": "300px",
        "sScrollX": "300px",
        "responsive": true,
        //"sScrollXInner": "110%",
        "fnInitComplete": function() {
            this.css("visibility", "visible");
           this.wrap("<div style='overflow:auto;width:100%;position:relative;'></div>"); 
        }
    });
});