給滾動條來表

Question

我的表體是在以下小提琴https://jsfiddle.net/zj36whmo/

<table class="table table-striped"> 
 
     <thead> 
 
     <tr> 
 
      <th>Make</th> 
 
      <th>Model</th> 
 
      <th>Color</th> 
 
      <th>Year</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td class="filterable-cell">Ford</td> 
 
      <td class="filterable-cell">Escort</td> 
 
      <td class="filterable-cell">Blue</td> 
 
      <td class="filterable-cell">2000</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="filterable-cell">Ford</td> 
 
      <td class="filterable-cell">Escort</td> 
 
      <td class="filterable-cell">Blue</td> 
 
      <td class="filterable-cell">2000</td> 
 
     </tr> 
 
       <tr> 
 
      <td class="filterable-cell">Ford</td> 
 
      <td class="filterable-cell">Escort</td> 
 
      <td class="filterable-cell">Blue</td> 
 
      <td class="filterable-cell">2000</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="filterable-cell">Ford</td> 
 
      <td class="filterable-cell">Escort</td> 
 
      <td class="filterable-cell">Blue</td> 
 
      <td class="filterable-cell">2000</td> 
 
     </tr> 
 
     </tbody> 
 
     
 
    </table>

我想單獨給TBODY滾動條。我已經看到了很多關於stackoverflow的問題，讓tbody單獨滾動。但是，他們混淆了寬度。我試着修改選項，但我失去了滾動。請幫助我

Answer 1

編輯根據評論尋找對齊，請注意，許多事情發生了變化，jQuery代碼已添加適當的大小。這是根據您的情況改編的suggested question in comments。

var $table = $('table'), 
 
    $bodyCells = $table.find('tbody tr:first').children(), 
 
    colWidth; 
 

 
// Adjust the width of thead cells when window resizes 
 
$(window).resize(function() { 
 
    // Get the tbody columns width array 
 
    colWidth = $bodyCells.map(function() { 
 
    return $(this).width(); 
 
    }).get(); 
 

 
    // Set the width of thead columns 
 
    $table.find('thead tr').children().each(function(i, v) { 
 
    $(v).width(colWidth[i]); 
 
    }); 
 
}).resize(); // Trigger resize handler

table { 
 
    width: 100%; 
 
    border-spacing: 0; 
 
    border: 1px solid gray; 
 
} 
 
table tbody, 
 
table thead { 
 
    display: block; 
 
} 
 
thead tr th { 
 
    height: 30px; 
 
    line-height: 30px; 
 
    /* text-align: left; */ 
 
} 
 
table tbody { 
 
    height: 100px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 
tbody { 
 
    border-top: 1px solid lightgray; 
 
} 
 
tbody td, 
 
thead th { 
 
    width: 10%; 
 
    border-right: 1px solid lightgray; 
 
} 
 
tbody td:last-child, 
 
thead th:last-child { 
 
    border-right: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th>Make</th> 
 
     <th>Model</th> 
 
     <th>Color</th> 
 
     <th>Year</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford test</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue more</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    </tbody> 
 

 
</table>