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

Question

I want to add scroll to my html table, both horizontally and vertically too. But only tbody should be allowed to scroll, and thead should be fixed while scrolling tbody vertically and scrolled/adjusted while scrolling tbody horizontally. I know that I have to apply overflow css property to tbody and then after it, adjust thead width with offset by using jquery. If anyone knows the solution, then answer will be appreciated. Here is my code.

HTML Part

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

Answer 1

http://codepen.io/EasonWang01/pen/bEjRvj try it.

html {
        font-family: verdana;
        font-size: 10pt;
        line-height: 25px;
    }
    table {
        border-collapse: collapse;
        width: 540px;

        display: block;
    }
    thead {
        background-color: #EFEFEF;
    }
    thead, tbody {
        display: block;
    }
    tbody {
     overflow-y: scroll;
        height: 140px;
    }
    td, th {
        min-width: 100px;
        height: 25px;
        border: dashed 1px lightblue;
    }

Answer 2

Done. As it was my mistake to start jquery function. By putting js code into $(function () {}); , it is solved.