I have a HTML structure and I have to make a table header sticky to the main-1, but I am not capable of making a working demo. (I tried it with more rows.)
HTML: on CodePen: https://codepen.io/jokemail/pen/VwBvNBv
#printGridHeader
{
position: sticky;
top: 6.5em;
z-index:202;
background-color: #ffffff;
}
#printGridTable.th
{
position: sticky;
top: 6.5em;
z-index:202;
background-color: #ffffff;
}<div id="main-1" >
<form id="frmSearch_1" method="post">
<div id="printGridHeader" style="text-align:right;margin:20px 0px;">
This also have to be sticky and already is
</div>
<div id="tableDiv" style="overflow-x:auto;">
<table id="printGridTable" style="overflow-x:auto;width:100%;">
<thead>
<tr id="printGridTable_head">
<th scope="col" width="40px">Nr.</th>
<th scope="col" width="40px">Nr.</th>
</tr>
</thead>
<tbody>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>CodePudding user response：
- Remove style
style="overflow-x:auto;"from "tableDiv" Div - In your CSS, th is not class. So it would be
#printGridTable th
Full code below
#printGridHeader
{
position: sticky;
top: 6.5em;
z-index:202;
background-color: #ffffff;
}
#printGridTable th
{
position: sticky;
top: 10px;
z-index:202;
background-color: #ffffff;
}<div id="main-1" >
<form id="frmSearch_1" method="post">
<div id="printGridHeader" style="text-align:right;margin:20px 0px;">
This also have to be sticky and already is
</div>
<div id="tableDiv">
<table id="printGridTable" style="overflow-x:auto;width:100%;">
<thead>
<tr id="printGridTable_head">
<th scope="col" width="40px">Nr.</th>
<th scope="col" width="40px">Data</th>
</tr>
</thead>
<tbody>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
<tr >
<td width="40px">1.</td>
<td>126</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>