Scrollable DataTablesテーブル

Question

私は、スクロール可能な検索可能な固定高さテーブルを取得するために、DataTableのthis exampleをフォローしようとしています。ここでは、コードの私のスニペットは、これまでのところです：

$(document).ready(function() { 
 
    $('#dataTables_paginate').DataTable({ 
 
    filter: true, 
 
    info: false, 
 
    scrollY: '25vh', 
 
    scrollCollapse: true, 
 
    paging: false, 
 
    language: { 
 
     search: "_INPUT_", 
 
     searchPlaceholder: "Search..." 
 
    } 
 
    }); 
 
});

.dataTables_filter { 
 
    float: left; 
 
    text-align: left; 
 
    padding: 0px; 
 
    margin: 0px; 
 
}

<script src="https://cdn.datatables.net/v/bs/jq-3.2.1/dt-1.10.16/datatables.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="col-lg-4"> 
 
    <table class="table table-striped table-bordered" id="dataTables_paginate"> 
 
     <thead> 
 
     <tr> 
 
      <th>Name</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

私は私がこれまで書いてきたコードには2つの問題があります。まず第一に、<thead>は、テーブルの本体から切り離されているように見えます。

第2に、私はDataTableの検索ボックスを左揃えにしようとしましたが、使用したコードに関係なく移動することはできません。検索ボックスの位置を調整してテーブルと同じ幅にする方法はありますか？

Answer 1

CSS for datatables bootstrapdataTables.bootstrap.cssは、たとえばデータセットのCDN pageにあります。これを含めると、ヘッダーの問題が修正されます。

フィルタ/検索ボックスにスタイルを適用するには、divにラップする必要があります。これはdom optionのデータテーブルで行うことができます。以下のスニペットで例を確認してください。

$(document).ready(function() { 
 
    $('#dataTables_paginate').DataTable({ 
 
    filter: true, 
 
    info: false, 
 
    scrollY: '25vh', 
 
    scrollCollapse: true, 
 
    paging: false, 
 
    dom: '<"wrapper"f>lrtip', 
 
    language: { 
 
     search: "_INPUT_", 
 
     searchPlaceholder: "Search..." 
 
    } 
 
    }); 
 
});

.wrapper { 
 
    float: left; 
 
    text-align: left; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
.wrapper input { 
 
    margin-left: 0 !important; 
 
    font-size: 20px; 
 
}

<script src="https://cdn.datatables.net/v/bs/jq-3.2.1/dt-1.10.16/datatables.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container-fluid"> 
 
    <div class="col-lg-4"> 
 
    <table class="table table-striped table-bordered" id="dataTables_paginate"> 
 
     <thead> 
 
     <tr> 
 
      <th>Name</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Steve Jason Smith</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>