Test Assigned Width Current

by daraii

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/2.1.4/css/dataTables.dataTables.min.css">
<script src="//cdn.datatables.net/2.1.4/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/5.0.1/js/dataTables.fixedColumns.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/5.0.1/js/fixedColumns.dataTables.js"></script>
<div>
  <table id="example" class="stripe row-border order-column" style="width:100%">
    <thead>
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
        <th>Extn.</th>
        <th>E-mail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger</td>
        <td>Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011-04-25</td>
        <td>$320,800</td>
        <td>5421</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Garrett</td>
        <td>Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011-07-25</td>
        <td>$170,750</td>
        <td>8422</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Ashton</td>
        <td>Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009-01-12</td>
        <td>$86,000</td>
        <td>1562</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Cedric</td>
        <td>Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012-03-29</td>
        <td>$433,060</td>
        <td>6224</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Airi</td>
        <td>Satou</td>
        <td>Accountant</td>
       ...

CSS

/* Ensure that the demo table scrolls */
th,
td {
  white-space: nowrap;
}

div.dataTables_wrapper {
  margin: 0 auto;
}

div.container {
  width: 80%;
}

JavaScript

$(document).ready(function() {

  $('#example').DataTable({
    columnDefs: [{
      width: 300,
      targets: 0
    }],
    fixedColumns: true,
    paging: false,
    scrollCollapse: true,
    scrollX: true,
    scrollY: 300
  });


});