將表格標題固定在可滾動div的頂部

Question

此示例中的div是可滾動的，如何使表格的標題固定在div的頂部？

<div id="table" style="overflow: auto; border: 1px solid;">
            <table id="table_id">
               <tr>
                  <th>A</th>
                  <th>B</th>
               </tr>

               <tr>
                  <td>A</td>
                  <td>B</td>
               </tr>

            </table>
</div>

Answer 1

我將分為兩部分並指定寬度（如果有響應，則為％）。

<table id="table-top">
<tr>
<th>A</th>
<th>B</th>
</tr>
</table>
<div id="table">
<table id="table_id">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>

CSS ...

#table{
    overflow-y: auto; 
    height:150px;
    border-bottom:1px solid grey;
}
table{
    width:100%;
}
table td, table th{
    border-color: grey;
    border: 1px solid;  
    width:50%;
}

https://jsfiddle.net/tonytansley/mvp4u54q/