Datatable with fixed column missalinged

Question

I am having an odd issue using DataTables with fixedColumn. Everything works fine but there is an space between the header and the list of rows that is displayed every-time I scroll the table horizontally.

Datatable issue

However, I can scroll all fixed rows and the table looks fine. (Try this by clicking on any row into the first column and press arrows up and down)

DataTable after scrolling the fixedColumn

Does anyone knows how to avoid this annoying issue? I appreciate any suggestion. Here the code and libraries I am using.

 $(document).ready(function() { $('#MyTable').DataTable({ paging: false, info: false, scrollX: true, fixedColumns: { leftColumns: 1 } }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Data Table--> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css"> <script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.dataTables.min.css"> <script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <table class="table table-bordered text-center" id="MyTable" style="width: 100%;"> <thead style="background-color: black; color: white;"> <tr> <th style="vertical-align: middle; text-align: center;">Fixed</th> <th style="vertical-align: middle; text-align: center;">X</th> <th style="vertical-align: middle; text-align: center;">Y</th> </tr> </thead> <tbody> <tr class="success"> <td>row 1</td> <td>193.38867</td> <td>150.45493</td> </tr> <tr class="danger"> <td>row 2</td> <td>0</td> <td>0</td> </tr> <tr class="danger"> <td>row 3</td> <td>0</td> <td>0</td> </tr> <tr class="danger"> <td>row 4</td> <td>0</td> <td>0</td> </tr> <tr class="success"> <td>row 5</td> <td>578.30164</td> <td>544.329</td> </tr> <tr class="success"> <td>row 6</td> <td>934.5156</td> <td>0</td> </tr> <tr class="danger"> <td>row 7</td> <td>0</td> <td>0</td> </tr> </tbody> </table> 

Answer 1

You need to use fixedColumns.bootstrap.min.css instead of fixedColumns.dataTables.min.css

See official example for more information.

See updated example below.

 $(document).ready(function() { $('#MyTable').DataTable({ paging: false, info: false, scrollX: true, fixedColumns: { leftColumns: 1 } }); }); 

 .table-style1 thead th { background-color: black; color: white; vertical-align: middle; text-align: center; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Data Table--> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap.min.css"> <script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script> <table class="table table-bordered text-center table-style1" id="MyTable" style="width: 100%;"> <thead> <tr> <th>Fixed</th> <th>X</th> <th>Y</th> </tr> </thead> <tbody> <tr class="success"> <td>row 1</td> <td>193.38867</td> <td>150.45493</td> </tr> <tr class="danger"> <td>row 2</td> <td>0</td> <td>0</td> </tr> <tr class="danger"> <td>row 3</td> <td>0</td> <td>0</td> </tr> <tr class="danger"> <td>row 4</td> <td>0</td> <td>0</td> </tr> <tr class="success"> <td>row 5</td> <td>578.30164</td> <td>544.329</td> </tr> <tr class="success"> <td>row 6</td> <td>934.5156</td> <td>0</td> </tr> <tr class="danger"> <td>row 7</td> <td>0</td> <td>0</td> </tr> </tbody> </table> 

Answer 2

You are using too much css files fo dataTables which are conflicting with each other.

Just use dataTables.bootstrap.min.css

Stack Snippet

 $(document).ready(function() { var table = $('#MyTable').DataTable({ scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, fixedColumns: { leftColumns: 1, rightColumns: 1 } }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <table class="table table-bordered text-center" id="MyTable" style="width: 100%;"> <thead style="background-color: black; color: white;"> <tr> <th style="vertical-align: middle; text-align: center;">Fixed</th> <th style="vertical-align: middle; text-align: center;">X</th> <th style="vertical-align: middle; text-align: center;">Y</th> <th style="vertical-align: middle; text-align: center;">Z</th> <th style="vertical-align: middle; text-align: center;">Z</th> </tr> </thead> <tbody> <tr class="success"> <td>row 1</td> <td>193.38867</td> <td>150.45493</td> <td>150.45493</td> <td>150.45493</td> </tr> <tr class="danger"> <td>row 2</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr class="danger"> <td>row 3</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr class="danger"> <td>row 4</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr class="success"> <td>row 5</td> <td>578.30164</td> <td>544.329</td> <td>544.329</td> <td>544.329</td> </tr> <tr class="success"> <td>row 6</td> <td>934.5156</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr class="danger"> <td>row 7</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table>