0

My table is in the following fiddle 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>

I want to give the tbody alone a scrollbar. I have seen many questions on stackoverflow to make the tbody alone scroll. However, they mess with the width. I tried tinkering with the options but I lose the scroll. Please help me

Abood
  • 572
  • 1
  • 5
  • 13
Echchama Nayak
  • 971
  • 3
  • 23
  • 44
  • check this one [Fixed Table Header](http://stackoverflow.com/questions/35071546/fixed-table-header) – Abood Dec 26 '16 at 13:58
  • take a look to http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody – gaetanoM Dec 26 '16 at 14:05

1 Answers1

0

Edit based on comment looking for alignment, note that many things changed and jQuery code has been added for proper resizing. It's an adaptation of the suggested question in comments to your case.

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>
Community
  • 1
  • 1
Syden
  • 8,425
  • 5
  • 26
  • 45