使用滚动条固定宽度和高度

Question

I have datatable like this, i use the data table from this web site : https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html . 我有这样的数据表，我使用来自以下网站的数据表： https : //datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html 。

i implemented code but it does not work correctly see the code bellow: 我实现了代码，但无法正常工作，请参见下面的代码：

 <html> <head> <title>Datatables.net</title> <link href="Content/bootstrap.css" rel="stylesheet" /> <script src="Scripts/jquery-3.3.1.js"></script> <script src="Scripts/bootstrap.js"></script> </head> <body> <style> .table-container { position: relative; width: 600px; height: 100%; border: 2px solid red; display: inline-block; } table { float: left; } th { border: 1px solid black; padding: 10px; } td { border: 1px solid black; padding: 10px; margin: 0; } .right { overflow: auto; } .container { overflow-y: auto; height: 200px; } th, td { white-space: nowrap; } div.dataTables_wrapper { width: 500px; margin: 0 auto; } </style> <link href="DataTables/datatables.min.css" rel="stylesheet" /> <script src="DataTables/datatables.min.js"></script> <script type="text/javascript" src="fixedColumn.js"></script> <script> $(document).ready(function () { var table = $('#example').DataTable({ scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, fixedColumns: { leftColumns: 1, rightColumns: 1 } }); }); </script> <table class="table table-striped row-border order-column" id="example" style="width: 100%;"> <thead> <tr> <th class="text-center">Opérations</th> <th></th> <th colspan="8" class="text-center not-fixed">Commissions directes</th> <th colspan="7" class="text-center">Commissions sur incitation</th> <th colspan="9" class="text-center">Paramètres autres</th> </tr> <tr> <th class="">Opérations possibles</th> <th></th> <th class="">Offre commerciale 0%</th> <th rowspan="2">Taux de frais client</th> <th rowspan="2">Seuil taux de frais client</th> <th>Commissions directes</th> <th colspan="4" class="text-center">Coeff VP</th> <th>Commissions sur incitation</th> <th colspan="4" class="text-center">Coef VP</th> <th rowspan="2">t% incitation (pour règle COMMINC3)</th> <th rowspan="2" style="width:100px">N° règle</th> <th>Numéro de contrat</th> <th>Montant prime unique</th> <th>Montant versements programmés</th> <th>Cotisation mensuelle première année</th> <th>Avertissement double saisie</th> <th>Profil client</th> <th>Taux UC proposé</th> <th>Taux UC choisi</th> <th>Recommandation</th> </tr> <tr> <th class="">Opération</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center">O/N</th> <th class="text-center">M</th> <th class="text-center">T</th> <th class="text-center">S</th> <th class="text-center">A</th> <th class="text-center">O/N</th> <th class="text-center">M</th> <th class="text-center">T</th> <th class="text-center">S</th> <th class="text-center">A</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> </tr> </thead> <tbody> </tbody> </table> </body> </html>

can any one help me to fix just the first column on the left to help user identify line 有谁能帮助我修复左侧的第一列，以帮助用户识别行

Answer 1

I think something wrong with js links. 我认为js链接有问题。

Here is the updated code: 这是更新的代码：

I have added below required links and css in your code: 我在您的代码中添加了以下必需的链接和CSS：

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>


.table-striped {
  background: #fff;
}

 <html> <head> <title>Datatables.net</title> <link href="Content/bootstrap.css" rel="stylesheet" /> <script src="Scripts/jquery-3.3.1.js"></script> <script src="Scripts/bootstrap.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script> </head> <body> <style> .table-container { position: relative; width: 600px; height: 100%; border: 2px solid red; display: inline-block; } table { float: left; } th { border: 1px solid black; padding: 10px; } td { border: 1px solid black; padding: 10px; margin: 0; } .right { overflow: auto; } .container { overflow-y: auto; height: 200px; } th, td { white-space: nowrap; } div.dataTables_wrapper { width: 500px; margin: 0 auto; } .table-striped { background: #fff; } </style> <link href="DataTables/datatables.min.css" rel="stylesheet" /> <script src="DataTables/datatables.min.js"></script> <script type="text/javascript" src="fixedColumn.js"></script> <script> $(document).ready(function() { var table = $('#example').DataTable({ scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, fixedColumns: { leftColumns: 1, rightColumns: 1 } }); }); </script> <table class="table table-striped row-border order-column" id="example" style="width: 100%;"> <thead> <tr> <th class="text-center">Opérations</th> <th></th> <th colspan="8" class="text-center not-fixed">Commissions directes</th> <th colspan="7" class="text-center">Commissions sur incitation</th> <th colspan="9" class="text-center">Paramètres autres</th> </tr> <tr> <th class="">Opérations possibles</th> <th></th> <th class="">Offre commerciale 0%</th> <th rowspan="2">Taux de frais client</th> <th rowspan="2">Seuil taux de frais client</th> <th>Commissions directes</th> <th colspan="4" class="text-center">Coeff VP</th> <th>Commissions sur incitation</th> <th colspan="4" class="text-center">Coef VP</th> <th rowspan="2">t% incitation (pour règle COMMINC3)</th> <th rowspan="2" style="width:100px">N° règle</th> <th>Numéro de contrat</th> <th>Montant prime unique</th> <th>Montant versements programmés</th> <th>Cotisation mensuelle première année</th> <th>Avertissement double saisie</th> <th>Profil client</th> <th>Taux UC proposé</th> <th>Taux UC choisi</th> <th>Recommandation</th> </tr> <tr> <th class="">Opération</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center">O/N</th> <th class="text-center">M</th> <th class="text-center">T</th> <th class="text-center">S</th> <th class="text-center">A</th> <th class="text-center">O/N</th> <th class="text-center">M</th> <th class="text-center">T</th> <th class="text-center">S</th> <th class="text-center">A</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> <th class="text-center col-oui-non">O/N</th> </tr> </thead> <tbody> </tbody> </table> </body> </html>

使用滚动条固定宽度和高度

问题描述

1 个解决方案

解决方案1
0 2018-10-24 09:14:53

使用滚动条固定宽度和高度

问题描述

1 个解决方案

解决方案1 0 2018-10-24 09:14:53

解决方案1
0 2018-10-24 09:14:53