Set position: sticky on table header with multiple rows
Question
I have a table header with 3 rows and I try to fix all those rows when I scroll down my table.
My problem is, only the last row of my header stay on top of the table when I scroll.
How can I set my position: sticky on the whole header ?
Here's my style and my HTML :
.table-responsive{ height: 300px; overflow: scroll; } thead tr:nth-child(3) th { background: white; position: sticky; top: 0; z-index: 10; } td{ text-align: center; }
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body> <div class="table-responsive"> <table class="table table-bordered" style="border-width: 3px"> <thead class="thead-light"> <tr> <th></th> <th colspan="3" style="font-size: 20px; text-align: center" class="align-middle"> CATEGORY 1 </th> <th colspan="4" style="font-size: 20px; text-align: center" class="align-middle"> CATEGORY 2 </th> </tr> <tr> <th></th> <th colspan="2" style="font-size: 16px; text-align: center" class="align-middle"> Sub-Category 1.1 </th> <th colspan="1" style="font-size: 16px; text-align: center" class="align-middle"> Sub-Category 1.2 </th> <th colspan="2" style="font-size: 16px; text-align: center" class="align-middle"> Sub-Category 2.1 </th> <th colspan="1" style="font-size: 16px; text-align: center" class="align-middle"> Sub-Category 2.2 </th> <th colspan="1" style="font-size: 16px; text-align: center" class="align-middle"> Sub-Category 2.3 </th> </tr> <tr> <th> Group </th> <th style="font-size: 12px; text-align: center" class="align-middle"> Access 1 </th> <th style="font-size: 12px; text-align: center" class="align-middle"> Access 2 </th> <th style="font-size: 12px; text-align: center" class="align-middle"> Access 3 </th> <th style="font-size: 12px; text-align: center" class="align-middle"> Access 4 </th> <th style="font-size: 12px; text-align: center" class="align-middle"> Access 5 </th> <th style="font-size: 12px; text-align: center" class="align-middle"> Access 6 </th> <th style="font-size: 12px; text-align: center" class="align-middle"> Access 7 </th> </tr> </thead> <tbody> <tr> <th>Group 1</th> <td>?</td> <td>?</td> <td>?</td> <td>Y</td> <td>N</td> <td>Y</td> <td>N</td> </tr> <tr> <th>Group 2</th> <td>Y</td> <td>N</td> <td>N</td> <td>Y</td> <td>N</td> <td>N</td> <td>N</td> </tr> <tr> <th>Group 3</th> <td>N</td> <td>N</td> <td>Y</td> <td>N</td> <td>N</td> <td>?</td> <td>?</td> </tr> <tr> <th>Group 4</th> <td>N</td> <td>Y</td> <td>N</td> <td>N</td> <td>Y</td> <td>N</td> <td>N</td> </tr> <tr> <th>Group 5</th> <td>N</td> <td>Y</td> <td>N</td> <td>N</td> <td>Y</td> <td>N</td> <td>N</td> </tr> </tbody> </table> </div> </body>
When I change the number of nth-child property in the stylesheet, it changes the row displayed. For exemple if I set it to 1, the first row of my header will be displayed. I also tried to remove this property, but all of my rows doesn't keep their height.
Thank you in advance for your help
1 answers
solution1
0 2020-11-12 09:59:18
ıf you dont want the last row to stay on top you should get rid of "position:sticky" in replacement, you could put "position: abslute" or "position relative"
and also your html doesent seem right so i formetted and fixed your html for you.
your css has to look like this;
.table-responsive{
height: 300px;
overflow: scroll;
}
thead tr:nth-child(3) th {
background: white;
top: 0;
z-index: 10;
}
td{
text-align: center;
}
this is your html that i fixed
<!DOCTYPE html>
<head>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<body>
<div class="table-responsive">
<table class="table table-bordered" style="border-width: 3px">
<thead class="thead-light">
<tr>
<th></th>
<th colspan="3" style="font-size: 20px; text-align: center" class="align-middle">
CATEGORY 1
</th>
<th colspan="4" style="font-size: 20px; text-align: center" class="align-middle">
CATEGORY 2
</th>
</tr>
<tr>
<th></th>
<th colspan="2" style="font-size: 16px; text-align: center" class="align-middle">
Sub-Category 1.1
</th>
<th colspan="1" style="font-size: 16px; text-align: center" class="align-middle">
Sub-Category 1.2
</th>
<th colspan="2" style="font-size: 16px; text-align: center" class="align-middle">
Sub-Category 2.1
</th>
<th colspan="1" style="font-size: 16px; text-align: center" class="align-middle">
Sub-Category 2.2
</th>
<th colspan="1" style="font-size: 16px; text-align: center" class="align-middle">
Sub-Category 2.3
</th>
</tr>
<tr>
<th> Group </th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 1
</th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 2
</th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 3
</th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 4
</th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 5
</th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 6
</th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 7
</th>
</tr>
</thead>
<tbody>
<tr>
<th>Group 1</th>
<td>?</td>
<td>?</td>
<td>?</td>
<td>Y</td>
<td>N</td>
<td>Y</td>
<td>N</td>
</tr>
<tr>
<th>Group 2</th>
<td>Y</td>
<td>N</td>
<td>N</td>
<td>Y</td>
<td>N</td>
<td>N</td>
<td>N</td>
</tr>
<tr>
<th>Group 3</th>
<td>N</td>
<td>N</td>
<td>Y</td>
<td>N</td>
<td>N</td>
<td>?</td>
<td>?</td>
</tr>
<tr>
<th>Group 4</th>
<td>N</td>
<td>Y</td>
<td>N</td>
<td>N</td>
<td>Y</td>
<td>N</td>
<td>N</td>
</tr>
<tr>
<th>Group 5</th>
<td>N</td>
<td>Y</td>
<td>N</td>
<td>N</td>
<td>Y</td>
<td>N</td>
<td>N</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
position sticky with a 3 rows header
Position sticky not working on table header when overflow is set to scroll / auto
position sticky for complex table header
Sticky multiple table header (thead) rows using only css/bootstrap
Is it possible to create a sticky table header with multiple rows inside it?
Sticky table header with two header rows
Sticky table header position absolute without overlap?
CSS sticky table header with scrolling and position absolute
sticky table header transparent the table rows while scrolling
Sticky header in flexbox table is not sticky
Related Tags