具有固定列缺失的数据表

时间：2018-02-08 17:46:37

标签： javascript html css datatables

我在使用带有fixedColumn的DataTables时遇到了一个奇怪的问题。一切正常，但每当我水平滚动表格时，标题和行列表之间都有一个空格。

Datatable issue

但是，我可以滚动所有固定行，表格看起来很好。 （通过单击第一列中的任何行并向上和向下按箭头来尝试此操作）

DataTable after scrolling the fixedColumn

有谁知道如何避免这个恼人的问题？我感谢任何建议。 这里是我正在使用的代码和库。

$(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>

2 个答案:

答案 0 :(得分：3)

您需要使用fixedColumns.bootstrap.min.css代替fixedColumns.dataTables.min.css

有关详细信息，请参阅official example。

请参阅下面的更新示例。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#MyTable').DataTable({
    paging: false,
    info: false,
    scrollX: true,
    fixedColumns: {
      leftColumns: 1
    }
  });
});
＆＃13; 
.table-style1 thead th {
   background-color: black;
   color: white;
   vertical-align: middle; 
   text-align: center;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您正在使用过多的dataTables css文件，这些文件彼此冲突。

只需使用dataTables.bootstrap.min.css

即可

Stack Snippet

＆＃13;
＆＃13; 
$(document).ready(function() {
  var table = $('#MyTable').DataTable({
    scrollY: "300px",
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    fixedColumns: {
      leftColumns: 1,
      rightColumns: 1
    }
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题