修复可滚动div顶部的表头 [英] Fix table header at top of scrollable div

问题描述

此示例中的div是可滚动的，如何将表格的标题固定在div的顶部？

The div in this example is scrollable, how do I make the header of the table fixed to the top of the 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>

推荐答案

我会分成2个部分并指定宽度（ ％，如果有响应）。

I would split into 2 sections and dictate the widths (% if responsive).

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

这篇关于修复可滚动div顶部的表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！