CODEWITHSUNDEEP
javascripthtmlcssdatatables
Oswaldo Rubio
Oswaldo Rubio

Reputation: 60

Datatable with fixed column missalinged

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>

Upvotes: 0

Views: 9928

Answers (2)

Gyrocode.com
Gyrocode.com

Reputation: 58860

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>

Upvotes: 4

Bhuwan
Bhuwan

Reputation: 16855

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>

Upvotes: 1

Related Questions