How do I fixed html table header in a div when scrolling?

Question

I have a HTML table. I have done the scrolling thing. Here is the code for HTML table.

<div id="flagging"  >
  <table>
    <thead>
      <th> Header 1 </th>
      <th> Header 2 </th>                            
    </thead>
    <tbody >
      <tr>
        <td> Row 1, Data 1</td>
        <td>Row 1, Data 2</td>
      </tr>
      <tr>
        <td> Row 2, Data 1</td>
        <td>Row 2, Data 2</td>
      </tr>
    </tbody>
  </table>

This is for scrolling thing.

#flagging td,#flagging th{
  padding: 2px;
  text-align: center;
  border: 1px solid #817e7e;
}
#flagging{
  border: 1px solid #5a585a;
  overflow: auto;
  height: 150px;
}

How can I fixed the header when scrolling ?

Possible duplicate of [Table header to stay fixed at the top when user scrolls it out of view with jQuery](http://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque). If you don't have jQuery in your project, see [HTML table with fixed headers?](http://stackoverflow.com/questions/673153/html-table-with-fixed-headers) — tao, Apr 09 '17 at 19:43
This is a dup question. http://stackoverflow.com/questions/17827908/how-to-make-fixed-header-table-inside-scrollable-div — funcoding, Apr 09 '17 at 19:51
I don't think you search before asking the question: http://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling — funcoding, Apr 09 '17 at 19:53

score -1 · Answer 1 · answered Apr 09 '17 at 20:02

that a star, is that you expect ?

#flagging td,#flagging th{
    padding: 2px;
    text-align: center;
    border: 1px solid #817e7e;

}
#flagging{

    border: 1px solid red;
    overflow: auto;
    height: 150px;
    position:relative;
}

thead{
    position:fixed;
    background:white;
}

tbody{
    position:absolute;
    top:25px;
}

<div id="flagging"  >
   <table>
     <thead>
       <th> Header 1 </th>
       <th> Header 2 </th>                            
     </thead>
     <tbody >
       <tr>
         <td> Row 1, Data 1</td>
         <td>Row 1, Data 2</td>
       </tr>
       <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
        <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
        <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
        <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
        <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
       <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
       <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr><tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr><tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr><tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr><tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr><tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
     </tbody>
   </table>
</div>

Sometimes I wish my clients didn't care so much about their column header widths being bound to their respective columns either... — tao, Apr 09 '17 at 20:14
you have only to center them by having the same size of the other. — Sandro Das Neves, Apr 09 '17 at 20:16
This is not so simple, Sandro. Most importantly, it's already been asked and answered quite a few times before. Answering a duplicate question won't bring you many kudos on [so]. You should first check the existing answers on older versions of this question. If you think you can come up with something better, make your contribution there. In the above comment I was just letting you know your solution breaks connection between columns and their headers, which defeats the purpose of showing them, in some cases. Also consider resizing or changes in the dataset (filters?), while at it. — tao, Apr 09 '17 at 20:19

How do I fixed html table header in a div when scrolling?

1 Answers1