XY滚动具有垂直固定标题的HTML表 [英] XY Scroll HTML table with vertically fixed header

问题描述

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

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

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

推荐答案

因为这是我的错误，启动jquery函数。通过将js代码放入 $（function（）{}）; ，它被解决。

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

这篇关于XY滚动具有垂直固定标题的HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！