CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
Akshay Vaghasiya
Akshay Vaghasiya

Reputation: 1637

XY Scroll HTML table with vertically fixed header

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>

Upvotes: 0

Views: 3456

Answers (2)

seasonqwe
seasonqwe

Reputation: 105

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

Upvotes: 1

Akshay Vaghasiya
Akshay Vaghasiya

Reputation: 1637

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

Upvotes: 0

Related Questions