Barrosy
Reputation: 1457
Is it possible to create a sticky table header with multiple rows inside it?
Given table provides a table head containing multiple rows. I already have a functional example for creating a table with a sticky table header, however when using multiple rows in the header, this solution will not do as some of the cells will disappear behind other cells.
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
thead th {
position: sticky;
top: -1px;
background-color: #fff;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm">
<thead>
<tr>
<th scope="col" rowspan="2">#</th>
<th scope="col" colspan="2">Group 1</th>
<th scope="col" colspan="2">Group 2</th>
<th scope="col" rowspan="2">Handle</th>
</tr>
<tr>
<th>
First
</th>
<th>
Last
</th>
<th>
First
</th>
<th>
Last
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>According to the behaviour of my code above, the table head cells "Group 1" and "Group 2" will disappear behind the cells of the following row.
How could I avoid this from happening?
Upvotes: 0
Views: 357
Answers (2)
dschubert
Reputation: 1
You might add a class to your second row elements and add a top value:
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
thead th {
position: sticky;
top: -1px;
background-color: #fff;
}
.second-row {
top: 34px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm">
<thead>
<tr>
<th scope="col" rowspan="2">#</th>
<th scope="col" colspan="2">Group 1</th>
<th scope="col" colspan="2">Group 2</th>
<th scope="col" rowspan="2">Handle</th>
</tr>
<tr>
<th class="second-row">
First
</th>
<th>
Last
</th>
<th class="second-row">
First
</th>
<th class="second-row">
Last
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
thead th {
position: sticky;
top: -1px;
background-color: #fff;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm">
<thead>
<tr>
<th scope="col" rowspan="2">#</th>
<th scope="col" colspan="2">Group 1</th>
<th scope="col" colspan="2">Group 2</th>
<th scope="col" rowspan="2">Handle</th>
</tr>
<tr>
<th>
First
</th>
<th>
Last
</th>
<th>
First
</th>
<th>
Last
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>Upvotes: 0
Mohd Tabish Baig
Reputation: 452
Try the following changes in your css:
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
thead tr#row1 th {
position: sticky;
top: -1px;
background-color: #afc8f0;
}
thead tr#row2 th{
position: sticky;
top: 30px;
background-color: #afc8f0;
}
update your html file also
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm">
<thead>
<tr id="row1">
<th></th>
<th scope="col" colspan="2">Group 1</th>
<th scope="col" colspan="2">Group 2</th>
<th></th>
</tr>
<tr id="row2">
<th>#</th>
<th>
First
</th>
<th>
Last
</th>
<th>
First
</th>
<th>
Last
</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>
here is a fiddle for your solution.
Upvotes: 2
Related Questions
- table with sticky header and horizontal scroll
- How to make table header with 2 rows sticky?! (without js)
- Sticky table header with two header rows
- sticky header with HTML table
- HTML table with two sticky columns and headers (using only CSS)
- How to make a scrollable table with sticky headers
- Sticky header for table
- position sticky for complex table header
- What's the best way to have a table with sticky header?
- Sticky row and column header in table