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

2020-04-23 16:12:23 +00:00
Commented Apr 23, 2020 at 16:12 — j08691
– j08691, Commented Apr 23, 2020 at 16:12

Coder · Accepted Answer · 2020-04-23 17:02:07Z

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 ?
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;.
@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 here on SO.
@StephenP Thanks, This is something new to me as well. Thanks for clarification. So first two digit works like an opacity?
@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.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related