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

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; }

1 ответ