[html] HTML table with 100% width, with vertical scroll inside tbody

Adding a fixed width to td,th after making tbody & thead display block works perfectly and also we can use slimscroll plugin to make the scroll bar beautiful.

enter image description here

_x000D_
_x000D_
<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
    <title> Scrollable table </title>_x000D_
    <style>_x000D_
        body {_x000D_
            font-family: sans-serif;_x000D_
            font-size: 0.9em;_x000D_
        }_x000D_
        table {_x000D_
            border-collapse: collapse;_x000D_
            border-bottom: 1px solid #ddd;_x000D_
        }_x000D_
        thead {_x000D_
            background-color: #333;_x000D_
            color: #fff;_x000D_
        }_x000D_
        thead,tbody {_x000D_
            display: block;_x000D_
        }_x000D_
        th,td {_x000D_
            padding: 8px 10px;_x000D_
            border: 1px solid #ddd;_x000D_
            width: 117px;_x000D_
            box-sizing: border-box;_x000D_
        }_x000D_
        tbody {_x000D_
            height: 160px;_x000D_
            overflow-y: scroll_x000D_
        }_x000D_
    </style>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
    <table class="example-table">_x000D_
        <thead>_x000D_
            <tr>_x000D_
                <th> Header 1 </th>_x000D_
                <th> Header 2 </th>_x000D_
                <th> Header 3 </th>_x000D_
                <th> Header 4 </th>_x000D_
            </tr>_x000D_
        </thead>_x000D_
        <tbody>_x000D_
            <tr>_x000D_
                <td> Row 1- Col 1 </td>_x000D_
                <td> Row 1- Col 2 </td>_x000D_
                <td> Row 1- Col 3 </td>_x000D_
                <td> Row 1- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 2- Col 1 </td>_x000D_
                <td> Row 2- Col 2 </td>_x000D_
                <td> Row 2- Col 3 </td>_x000D_
                <td> Row 2- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 3- Col 1 </td>_x000D_
                <td> Row 3- Col 2 </td>_x000D_
                <td> Row 3- Col 3 </td>_x000D_
                <td> Row 3- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 4- Col 1 </td>_x000D_
                <td> Row 4- Col 2 </td>_x000D_
                <td> Row 4- Col 3 </td>_x000D_
                <td> Row 4- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 5- Col 1 </td>_x000D_
                <td> Row 5- Col 2 </td>_x000D_
                <td> Row 5- Col 3 </td>_x000D_
                <td> Row 5- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 6- Col 1 </td>_x000D_
                <td> Row 6- Col 2 </td>_x000D_
                <td> Row 6- Col 3 </td>_x000D_
                <td> Row 6- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 7- Col 1 </td>_x000D_
                <td> Row 7- Col 2 </td>_x000D_
                <td> Row 7- Col 3 </td>_x000D_
                <td> Row 7- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 8- Col 1 </td>_x000D_
                <td> Row 8- Col 2 </td>_x000D_
                <td> Row 8- Col 3 </td>_x000D_
                <td> Row 8- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 9- Col 1 </td>_x000D_
                <td> Row 9- Col 2 </td>_x000D_
                <td> Row 9- Col 3 </td>_x000D_
                <td> Row 9- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 10- Col 1 </td>_x000D_
                <td> Row 10- Col 2 </td>_x000D_
                <td> Row 10- Col 3 </td>_x000D_
                <td> Row 10- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 11- Col 1 </td>_x000D_
                <td> Row 11- Col 2 </td>_x000D_
                <td> Row 11- Col 3 </td>_x000D_
                <td> Row 11- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 12- Col 1 </td>_x000D_
                <td> Row 12- Col 2 </td>_x000D_
                <td> Row 12- Col 3 </td>_x000D_
                <td> Row 12- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 13- Col 1 </td>_x000D_
                <td> Row 13- Col 2 </td>_x000D_
                <td> Row 13- Col 3 </td>_x000D_
                <td> Row 13- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 14- Col 1 </td>_x000D_
                <td> Row 14- Col 2 </td>_x000D_
                <td> Row 14- Col 3 </td>_x000D_
                <td> Row 14- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 15- Col 1 </td>_x000D_
                <td> Row 15- Col 2 </td>_x000D_
                <td> Row 15- Col 3 </td>_x000D_
                <td> Row 15- Col 4 </td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td> Row 16- Col 1 </td>_x000D_
                <td> Row 16- Col 2 </td>_x000D_
                <td> Row 16- Col 3 </td>_x000D_
                <td> Row 16- Col 4 </td>_x000D_
            </tr>_x000D_
        </tbody>_x000D_
    </table>_x000D_
_x000D_
_x000D_
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>_x000D_
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>_x000D_
    <script>_x000D_
        $('.example-table tbody').slimscroll({_x000D_
            height: '160px',_x000D_
            alwaysVisible: true,_x000D_
            color: '#333'_x000D_
        })_x000D_
    </script>_x000D_
</body>_x000D_
_x000D_
</html>
_x000D_
_x000D_
_x000D_