DataTables

DataTables Examples

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.0/css/fixedColumns.dataTables.min.css">
<script src="https://nightly.datatables.net/fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<title>
  Scrolling and fixed</title>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>


<body>
  <div style="background:white">

    <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
      <thead>
        <tr>
          <th>fixed column</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
          <th>Browser</th>
          <th>Platform(s)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>we got some text to show here with spaces and more</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td>4</td>
         ...

JavaScript

$(function() {
		  $('#example').DataTable({
		    "fnRowCallback": function(nRow, aData, iDisplayIndex) {
		      $('td', nRow).each(function(iPosition) {
		        var sCellContent = $(this).html();
		        sCellContent = '<span style="white-space:nowrap;">' + sCellContent + '</span>';
		        $(this).html(sCellContent);
		      });
		      return nRow;
		    },
		    "scrollX": false,        
        "autoWidth": false,
        "scrollCollapse": false,
        "columnDefs": [{ "width": "500px", "targets": 0 }],
		    fixedColumns: true
		  });
		});