XY 滚动 HTML 表，带有垂直固定的标题

我想将滚动添加到我的html表中，无论是水平还是垂直。但是只允许 tbody 滚动，并且在垂直滚动 tbody 时应该固定 thead，在水平滚动 tbody 时应该滚动/调整。我知道我必须将溢出 css 属性应用于 tbody，然后在它之后，使用 jquery 调整带有偏移量的头宽度。如果有人知道解决方案，那么答案将不胜感激。这是我的代码。

网页部件

<table>
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
    </tr>
    <tr>
        <td>Row 4</td>
        <td>Row 4</td>
        <td>Row 4</td>
        <td>Row 4</td>
        <td>Row 4</td>
    </tr>
    <tr>
        <td>Row 5</td>
        <td>Row 5</td>
        <td>Row 5</td>
        <td>Row 5</td>
        <td>Row 5</td>
    </tr>
    <tr>
        <td>Row 6</td>
        <td>Row 6</td>
        <td>Row 6</td>
        <td>Row 6</td>
        <td>Row 6</td>
    </tr>
    <tr>
        <td>Row 7</td>
        <td>Row 7</td>
        <td>Row 7</td>
        <td>Row 7</td>
        <td>Row 7</td>
    </tr>
    <tr>
        <td>Row 8</td>
        <td>Row 8</td>
        <td>Row 8</td>
        <td>Row 8</td>
        <td>Row 8</td>
    </tr>
    <tr>
        <td>Row 9</td>
        <td>Row 9</td>
        <td>Row 9</td>
        <td>Row 9</td>
        <td>Row 9</td>
    </tr>
    <tr>
        <td>Row 10</td>
        <td>Row 10</td>
        <td>Row 10</td>
        <td>Row 10</td>
        <td>Row 10</td>
    </tr>
</tbody>
</table>

.CSS

        html {
            font-family: verdana;
            font-size: 10pt;
            line-height: 25px;
        }
        table {
            border-collapse: collapse;
            width: 300px;
            overflow-x: scroll;
            display: block;
        }
        thead {
            background-color: #EFEFEF;
        }
        thead, tbody {
            display: block;
        }
        tbody {
            overflow-y: scroll;
            overflow-x: hidden;
            height: 140px;
        }
        td, th {
            min-width: 100px;
            height: 25px;
            border: dashed 1px lightblue;
        }

.JS

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
    <script type="text/javascript">
        $('table').on('scroll', function () {
            $("table > *").width($("table").width() + $("table").scrollLeft());
        });
    </script>