如何在滚动时修复div中的html表头？

Question

我有一个HTML表格。我做了滚动的事情。这是HTML表的代码。

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

这是滚动的东西。

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

滚动时如何修复标题？

Answer 1

那个明星，是你所期待的吗？

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;