Дайте scrollbar к телу таблицы

Мой стол находится в следующей скрипке 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, чтобы сделать прокрутку только тела. Однако они путаются с шириной. Я пытался возиться с опциями, но потерял свиток. Пожалуйста, помогите мне

1 ответ

  1. Редактирование на основе комментария в поисках выравнивания обратите внимание, что многое изменилось, и был добавлен код jQuery для правильного изменения размера. Это адаптация предложенного вопроса в комментариях к вашему случаю.

    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>