使用滾動條固定寬度和高度
[英]Fixed width and height with scroll bars
問題描述
我有這樣的數據表，我使用來自以下網站的數據表： https : //datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html 。
我實現了代碼，但無法正常工作，請參見下面的代碼：
<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>
有誰能幫助我修復左側的第一列，以幫助用戶識別行
1 個解決方案
解決方案1
0 2018-10-24 09:14:53
我認為js鏈接有問題。
這是更新的代碼：
我在您的代碼中添加了以下必需的鏈接和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>
適合固定大小的圖像<td>寬度為 100%，但高度為滾動
[英]Fit an image in fixed size <td> with 100% width but height with scroll
如何在Html / Css / JavaScript中修復Messenger滾動條的寬度和高度
[英]How to fixed the width & height of Scroll bar of Messenger in Html/Css/JavaScript
當孩子不可見時，如何使固定高度和寬度的 div 水平滾動？
[英]How to make a div of fixed height and width scroll horizontally when childs are not more visible?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.