css - 表格内的按钮元素显示在 div 元素中的文本上方

Question

我创建了一个粘性标题，用于使用 jquery 过滤 html 表中的数据。我遇到的问题是粘性元素和表格中的元素的对齐方式。

我尝试过使用 z-index，但没有帮助。并且更改边距属性也会将边距应用于粘性元素。

<style>
body,th,td
{
    font-family: serif;
font-size: 20px;
text-align: center;
}
table
{
width: 125%;
overflow: auto;
margin: 50px auto;
}
caption
{
text-align: center;
margin: 10px auto;
font-family: serif;
font-size: 28px;
font-style: italic;
}
th,td
{
background-color: white;
border: 2px solid black;
height: 50px;
}
button
{
margin-left: 2px;
margin-right: 2px;
}
#srch_bar
{
position: -webkit-sticky;
top: 5px;
position: sticky;
margin-top: 10px;
float: right;
width: 100%;
height: 50px;
background-color: white;
}
#srch_bar select
{
outline: none;
border: none;
padding: none;
}
#LSRCH
{
text-transform: uppercase;
}
</style>
<script>//only the needed part is added
            for(j=0; j<res_stock.length; j++)
        {
            var trow    =   '<tr>';
            trow        +=  '<td>'  +   res_stock[j].slno   +   '</td>';
            trow        +=  '<td>'  +   res_stock[j].lotNo  +   '</td>';
            trow        +=  '<td>'  +   res_stock[j].parName    +   '</td>';
            trow        +=  '<td><button class="glyphicon glyphicon-forward btn-success btn-sm" id="UPD'    +   res_stock[j].slno   +   '"></button><button class="glyphicon glyphicon-edit btn-warning btn-sm" id="EDT'    +   res_stock[j].slno   +   '"></button><button class="glyphicon glyphicon-trash btn-danger btn-sm" id="DEL'    +   res_stock[j].slno   +   '"></button></td>';
            trow        +=  '<td>'  +   res_stock[j].gMtr   +   '</td>';
            trow        +=  '<td>'  +   res_stock[j].gWt    +   '</td>';
            trow        +=  '<td>'  +   res_stock[j].gActWt +   '</td>';
            trow        +=  '<td>'  +   res_stock[j].gRPWaWf    +   '</td>';
            trow        +=  '<td>'  +   res_stock[j].gGF.substring(res_stock[j].gGF.indexOf('G')+1,res_stock[j].gGF.indexOf('F'))   +   '</td>';
            trow        +=  '<td>'  +   tone_stretcher(res_stock[j].tone)   +   '</td>';
            trow        +=  '</tr>';
            $(trow).appendTo('#stk_tbl');
        }

该表是使用 jquery 由 json 文件中的动态数据生成的。问题是我在表格中有三个按钮，用于与该特定行相关的选项。当我滚动表格时，按钮显示在粘性元素上方。相反，它应该放在粘性元素的后面。

标签： csshtml-tablesticky