how to fix header of my table in javascript/html/jquery

Question

I have made an html javascript page. The problem which I’am facing is :

There are 2 scroll bars on my page, on scrolling the inner scroll bar which is corresponding to my table, I want that my table headers should remain fix, and the Rows should move down as they are moving down now.

I want that table header should remain fixed, so that at any time, user can see the column names header for any row.

On scrolling the outer scroll bar, there is no such requirement.

Is there any way of doing that ?

here is my code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> 

.content {
padding: 15px 40px;
    overflow: auto;
    height: 565px;
}

#abc {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#abc td, #abc th {
    border: 2px solid #ddd;
    padding:8px;
    }

#abc td {
    padding-left:20px;
    font-size:14px;
}

#abc tr:nth-child(even){background-color: #f2f2f2;}

#abc tr:hover {background-color: #ddd;}

#abc th {
    padding-top: 12px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #000000b3; 
    color: #FFFFFF;
}

#abc td + td {
    text-align: center;
}

</style>    
    </head>
    <body>
    <div>
        <p>Here is my code.
            Here is my code.
            Here is my code.
            Here is my code.
            Here is my code.
</p>
<p>
Here is my code.
<br/>
Here is my code.


 </p>
<p>Here is my code.</p>
<div>               
<div>
                <div class="content">

                        <table id="abc" style="width:100%" >

      <div>
<thead>
        <tr>
            <th width="10%">column_1 </th>
            <th width="60%">column_2 </th>
            <th width="20%">column_3 </th>
            <th width="10%">column_4 </th>
        </tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
   </thead>
   </div>

   <tbody>

   </tbody> 
</table>

<p>
Here is my code.
<br/>
Here is my code.


 </p>
            </div>


    </div>

</div>


</div>




    </body>
</html>

Regards

_"I have made an html javascript page"_ No you haven't – j08691 Apr 23 '20 at 16:12 — j08691, Apr 23 '20 at 16:12

Coder · Accepted Answer · 2020-04-23T17:02:07.687

Please see updated code. I hope it help. Using position:sticky and top:0 for <th> tag will solve the problem. I have cleaned your html too. Please see below code.

HTML

<body>
    <div>
        <p>Here is my code. Here is my code. Here is my code. Here is my code. Here is my code.
        </p>
        <p>
            Here is my code.
            <br/> Here is my code.
        </p>
        <p>Here is my code.</p>
        <div>
            <div>
                <div class="content">
                    <table id="abc" style="width:100%">
                        <div>
                            <thead>
                                <tr>
                                    <th width="10%">column_1 </th>
                                    <th width="60%">column_2 </th>
                                    <th width="20%">column_3 </th>
                                    <th width="10%">column_4 </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                            </tbody>
                        </div>
                    </table>
                    <p>
                        Here is my code.
                        <br/> Here is my code.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

<style>
        .content {
            padding: 0px 40px;
            overflow: auto;
            height: 565px;
        }

        #abc {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        #abc td,
        #abc th {
            border: 2px solid #ddd;
            padding: 8px;
        }

        #abc td {
            padding-left: 20px;
            font-size: 14px;
        }

        #abc tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        #abc tr:hover {
            background-color: #ddd;
        }

        #abc th {
            padding-top: 12px;
            padding-bottom: 10px;
            text-align: center;
            background-color: #000000;
            color: #FFFFFF;
            position: sticky;
            top: 0;
        }

        #abc td+td {
            text-align: center;
        }
    </style>

Thanks a lot Chary . When I scroll down , the columns headers are a bit transparent and hence the rows appear behind the column header while scrolling . Is there a way to fix that as well ? may be to make that opaque or something ? — Deepika Bansal, Apr 23 '20 at 16:46
Hello, You can use black color as `background-color: #000;` instead of `background-color: #000000b3`; or may some darker shade. Also, hex code that you are using is not correct. It should only 6 character excluding #. So correct background color will be `background-color: #000000;`. — Coder, Apr 23 '20 at 17:01
@Chary - an 8 character hex string **is** correct; it includes _transparency_ which is why the column headers "are a bit transparent". The usual 6 digits that people are used to are `#RRGGBB` 2-digits each for Red Green and Blue. Eight digits are `#AARRGGBB` with the first 2 digits being the _Alpha_ value. See [this question](https://stackoverflow.com/q/23201134/17300) here on SO. — Stephen P, Apr 23 '20 at 23:04
@StephenP Thanks, This is something new to me as well. Thanks for clarification. So first two digit works like an opacity? — Coder, Apr 24 '20 at 17:47
@Chary - yes, Alpha Channel == Opacity so in AARRGGBB you're specifying the opacity in the first two digits and the "normal" RGB in the rest. I tend to use CSS `rgba()` or `hsla()` myself instead. — Stephen P, Apr 24 '20 at 19:18

how to fix header of my table in javascript/html/jquery

1 Answers1