Click here to Skip to main content
14,538,503 members
Rate this:
Please Sign up or sign in to vote.
See more:
I want to fixed header when vertical scroll. This following my sample code:
<pre lang="HTML"><div>
<div style="width:300px!important;height:100px!important;overflow:auto;">
<table>
  <colgroup>
                                <col width="2%">
                                <col width="6%">
                                <col width="8%">
                                <col width="10%">
                                <col width="4%">
                                <col width="7%">
                                <col width="12%">
                                <col width="12%">
                                <col width="9%">
                                <col width="12%">
                                <col width="">
                                <col width="5%">
                                <col width="4%">
                            </colgroup>
                            <thead>
                                <tr>
                                    
                                    <th class="first-child" rowspan="2"></th>
                                    <th>aaaaaaaaaa</th>
                                    <th>aaaaaaaaaa</th>
                                    <th>aaaaaaaaaaaaaa</th>
                                    <th>aaaaaaaaaa</th>
                                   <th>aaaaaaaaaa</th>
                                    <th>aaaaaaaaaa</th>
                                    <th>aaaaaaaaaaaaaa</th>
                                    <th>aaaaaaaaaa</th>
                                    <th>aaaaaaaaaa</th>
                                    <th>aaaaaaaaaa</th>
                                    <th>aaaaaaaaaaaaaa</th>
                                    <th>aaaaaaaaaa</th>
                                    <th class="last-child">aaaaaaaaaaaaaaaa</th>
                                </tr>
                            </thead>
                             <tbody >
                                <tr >
                                    <td class="txt-center" rowspan="3">
                                        1
                                    </td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">1111</td>
                                    <td rowspan="3"><a href="#" >Sai Gon</a> </td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">2</td>
                                    <td>1</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>22</td>
                                    <td>2</td>
                                </tr><tr>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>22</td>
                                    <td>2</td>
                                </tr><tr>
                                    <td>3</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                </tr>
                            </tbody>
                                  <tbody >
                                <tr >
                                    <td class="txt-center" rowspan="3">
                                        1
                                    </td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">1111</td>
                                    <td rowspan="3"><a href="#" >Sai Gon</a> </td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">2</td>
                                    <td>1</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>22</td>
                                    <td>2</td>
                                </tr><tr>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>22</td>
                                    <td>2</td>
                                </tr><tr>
                                    <td>3</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                </tr>
                            </tbody>
                                  <tbody >
                                <tr >
                                    <td class="txt-center" rowspan="3">
                                        1
                                    </td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">1111</td>
                                    <td rowspan="3"><a href="#" >Sai Gon</a> </td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">2</td>
                                    <td>1</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>22</td>
                                    <td>2</td>
                                </tr><tr>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>22</td>
                                    <td>2</td>
                                </tr><tr>
                                    <td>3</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                </tr>
                            </tbody>
                                  <tbody >
                                <tr >
                                    <td class="txt-center" rowspan="3">
                                        1
                                    </td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">1111</td>
                                    <td rowspan="3"><a href="#" >Sai Gon</a> </td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">2</td>
                                    <td rowspan="3">2</td>
                                    <td>1</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>22</td>
                                    <td>2</td>
                                </tr><tr>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>22</td>
                                    <td>2</td>
                                </tr><tr>
                                    <td>3</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                </tr>
                            </tbody>
                              
</table>
</div></div>


What I have tried:

Please tell me any solution for my problem . Thanks
Posted
Updated 21-Sep-18 8:26am

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Use position:sticky on the table header.
Demo[^]
How To Create a Sticky Element[^]
Can I use... CSS position:sticky[^]

If you need to support older browsers, or any version of Internet Explorer, use a polyfill:
GitHub - wilddeer/stickyfill: Polyfill for CSS `position: sticky`[^]
   
Comments
Member 13338759 27-Sep-18 23:29pm
   
Thanks

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100