修复可滚动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

我会分成2个部分，并规定宽度(%如果响应)

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