Элементы кнопок внутри таблицы отображаются над текстом в элементе div - PullRequest
Новая
       18

Элементы кнопок внутри таблицы отображаются над текстом в элементе div

0 голосов
/ 23 декабря 2018

Я создал липкий заголовок для фильтрации данных внутри html-таблицы с помощью jquery.Проблема, с которой я сталкиваюсь, заключается в выравнивании липкого элемента и элементов в таблице.

Я пытался с z-index, но это не помогло.Кроме того, изменение атрибута margin также применяет поле margin к закрепленному элементу. 

<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');
        }

таблица генерируется динамическими данными из файла json с использованием jquery.Проблема в том, что у меня есть три кнопки внутри таблицы для параметров, связанных с этой конкретной строкой.Когда я прокручиваю таблицу, кнопки отображаются над закрепленным элементом.Вместо этого он должен идти за липким элементом.

...