You are currently viewing How to scrolling table with Fixed Header in HTML

How to scrolling table with Fixed Header in HTML

  • Post author:
  • Post category:css / html
  • Post last modified:July 7, 2021
  • Reading time:4 mins read

Sometimes you need to create scroll table and header must be fixed in your website or project. You can do it easily. I show you two example of scrolling table with fixed header and you can see and implement in your website. Let’s see first example:

Example-1

<html>
<head>
    <title>Table Scroll with fixed header</title>
</head>
<body>
    <table cellspacing="0" cellpadding="0" border="0" width="625">
        <tr>
            <td>
                <table cellspacing="0" cellpadding="1" border="1" width="600">
                    <tr>
                        <th>heading 1</th>
                        <th>heading 2</th>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <div style="width:625px; height:48px; overflow:auto;">
                    <table cellspacing="0" cellpadding="1" border="1" width="600">
                        <tr>
                            <td>data 1/1</td>
                            <td>data 1/2</td>
                        </tr>
                        <tr>
                            <td>data 2/1</td>
                            <td>data 2/2</td>
                        </tr>
                        <tr>
                            <td>data 3/1</td>
                            <td>data 3/1</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Example-2

<html>
<head>
    <title>Fixed Header - Scrollable Table</title>
    <style type="text/css">
        table#header th {
            border-right: solid 1px #000
        }
        table#header th#right-border {
            padding: 0 4px 0 3px;
            border-right: none;
        }
        table#tbl-content td {
            border-bottom: solid 1px #bbb;
            border-right: solid 1px #bbb;
        }
        table#tbl-content tr#bottom td {
            border-bottom: none;
        }
        #box {
            width: 100%;
            height: 100px;
            overflow-y: auto;
            border: solid 1px #000;
            border-top: none;
        }
        #tbl-content {
            width: 790px;
            table-layout: fixed;
            background: #fff;
        }
        #header {
            width: 790px;
            text-align: left;
            table-layout: fixed;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content" style="width:807px;">
            <div id="boundary" style="margin-right:-2px;background:darkkhaki;border:solid 1px #000;">
                <table id="header" cellpadding="3" cellspacing="0" border="0">
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                    </tr>
                </table>
            </div>
            <div id="box">
                <table id="tbl-content" cellpadding="3" cellspacing="0" border="0">
                    <tr>
                        <td>1</td>
                        <td>Haresh</td>
                        <td>Patel</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Mahesh</td>
                        <td>Rathod</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Paresh</td>
                        <td>Patel</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>John</td>
                        <td>Corter</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Mike</td>
                        <td>Chadns</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Temi</td>
                        <td>Marsh</td>
                        <td>[email protected]</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Hope you it helps