JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="mainTableWrapper">
  <table id="mainTable" class="table table-striped table-bordered table-hover table-condensed dataTable mainTable" style="width:100%;">
    <thead class="okToWrap">
      <tr>
        <th></th>
        <th>
          Column1
        </th>
        <th>
          Column2
        </th>
        <th>
          Column3
        </th>
        <th>
          Column4
        </th>
        <th>
          Column5
        </th>
        <th>
          Column6
        </th>
        <th>
          Column7
        </th>
        <th>
          Column8
        </th>
        <th>
          Column9
        </th>
        <th>
          Column10
        </th>
        <th>
          Column11
        </th>
        <th>
          Column12
        </th>
        <th>
          Column13
        </th>
        <th>
          Column14
        </th>
        <th>
          Column15
        </th>
        <th>
          Column16
        </th>
        <th>
          Column17
        </th>
        <th class="noExcessPadding">Options</th>
      </tr>
    </thead>
    <tfoot></tfoot>
    <tbody>

      <tr>
        <td class="centerColumnData">
          <a href="#">
            <span class="linkIcon glyphicon glyphicon-new-window"></span>
          </a>
        </td>
        <td>
          0
        </td>
        <td>
          0
        </td>
        <td>
          0
        </td>
        <td>
          0
        </td>
        <td>
          0
        </td>
        <td>
          0
        </td>
        <td>
          0
        </td>
        <td>
          0
        </td>
        <td>
          0
      ...

CSS

.tableRow {
    margin: 10px;
}
.aboveTableRow {
    margin: 10px 10px -5px 10px;
}
.belowTableRow {
    margin: 3px 10px 0 10px;
}
.table, td {
    font-size: 10px;
}

JavaScript

var mainTable = $("#mainTable").DataTable({
  "scrollY": "500px",
  "scrollX": true,
  //"scrollXInner": "100%",
  "scrollCollapse": true,
  //"autoWidth": false,
  "paging": true,
  "lengthMenu": [
    [10, 25, 50, -1],
    [10, 25, 50, "All"]
  ],
  "iDisplayLength": 25,
  "initComplete": function(settings, json) {
    $('#mainTableWrapper').show();
  },
  "dom": '<"row aboveTableRow"<"pull-left"l><B>f><"row tableRow"t><"row belowTableRow"<"pull-left"i>p>',
  buttons: [{
    extend: 'colvis',
    columns: ':gt(0)',
    text: '<span class="glyphicon glyphicon-th-list"></span>',
    className: 'btn-sm btn-info mainTableColumns',
    titleAttr: 'Select Columns to View'
  }, {
    text: '<span class="glyphicon glyphicon-check"></span>',
    action: function() {
      alert('button clicked');
    },
    className: 'btn-sm btn-info preset mainTableUserSettings',
    titleAttr: 'Save Selected View of Columns'
  }],
  "columnDefs": [
    //{ "width": "1px", "targets": [0, 18] },
    //{ "searchable": false, "targets": [0, 18] },
    //{ "orderable": false, "targets": [0, 18] }
  ],
  "order": [1, "asc"]
});