javascript - Datatable with fixed column missalinged - Stack Overflow|江阴雨辰互联

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=".3.7/css/bootstrap.min.css">

<script src=".2.1/jquery.min.js"></script>
<script src=".3.7/js/bootstrap.min.js"></script>
<!-- Data Table-->
<link rel="stylesheet" href=".10.16/css/dataTables.bootstrap.min.css">

<script src=".10.16/js/jquery.dataTables.min.js"></script>
<script src=".10.16/js/dataTables.bootstrap.min.js"></script>

<link rel="stylesheet" href=".2.4/css/fixedColumns.dataTables.min.css">
<script src=".2.4/js/dataTables.fixedColumns.min.js"></script>

<link rel="stylesheet" href=".1.3/css/fixedHeader.dataTables.min.css">
<script src=".1.3/js/dataTables.fixedHeader.min.js"></script>
<script src=".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>

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./bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Data Table-->
<link rel="stylesheet" href="https://cdn.datatables/1.10.16/css/dataTables.bootstrap.min.css">

<script src="https://cdn.datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables/1.10.16/js/dataTables.bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css">
<script src="https://cdn.datatables/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables/fixedheader/3.1.3/css/fixedHeader.dataTables.min.css">
<script src="https://cdn.datatables/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

Share Improve this question edited Feb 8, 2018 at 17:50 Bhuwan 16.9k5 gold badges37 silver badges60 bronze badges asked Feb 8, 2018 at 17:46 Oswaldo Rubio 602 silver badges9 bronze badges

1 Try replacing fixedColumns.dataTables.min.css with fixedColumns.bootstrap.min.css. This example shows the CSS and JS files needed for FixedColumns and BS3: datatables/extensions/fixedcolumns/examples/styling/… – K Thorngren Commented Feb 8, 2018 at 18:23

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

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./bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Data Table-->
<link rel="stylesheet" href="https://cdn.datatables/1.10.16/css/dataTables.bootstrap.min.css">

<script src="https://cdn.datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables/1.10.16/js/dataTables.bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables/fixedcolumns/3.2.4/css/fixedColumns.bootstrap.min.css">
<script src="https://cdn.datatables/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>

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./bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables/1.10.16/css/dataTables.bootstrap.min.css">

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744239424a4564631.html

javascript - Datatable with fixed column missalinged - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Datatable with fixed column missalinged - Stack Overflow

2 Answers 2

相关推荐