ThomasE
Reputation: 409
css - make 2 display:table-row sticky on top of each other
I have this HTML
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
text-align: center;
padding: 5px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
background: red;
}<body>
<div class="table">
<div class="row">
<div class="cell sticky"><span>Header Row 1</span>
</div>
</div>
<div class="row">
<div class="cell sticky"><span>Header Row 2</span>
</div>
</div>
<div class="row">
<div class="cell">Detail Row 1</div>
</div>
<div class="row">
<div class="cell">Detail Row 2</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
</div>
</body>It makes the second Header Row sticky - just as expected - but what if I want both Header Rows to be sticky on top of each other? - so that these 2 rows are always visible when the user scrolls the page?
Upvotes: 1
Views: 516
Answers (4)
G-Cyrillus
Reputation: 105863
In a real table, you would use a thead or tbody or tfoot tag to group a few rows together to stick them. table-row-group is avalaible via CSS to mimic a tbody behavior :
https://developer.mozilla.org/en-US/docs/Web/CSS/display
table-row-group
table-header-group
table-footer-group
These elements behave like HTML elements.
possible example below keeping the table-layout and dealing with groups of rows instead individuals rows :
.table {
display: table;
}
/*new */
.header-row-group {
display: table-header-group;
font-weight:bold;
}
/* end new */
.row {
display: table-row;
}
.cell {
display: table-cell;
text-align: center;
padding: 5px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
background: red;
}<body>
<div class="table">
<div class="header-row-group sticky"><!-- header row group added -->
<div class="row">
<div class="cell "><span>Header Row 1</span></div> <div class="cell">header Row 1</div>
</div>
<div class="row">
<div class="cell "><span>Header Row 2</span></div> <div class="cell">Wider Cell on Row 2</div>
</div>
</div>
<div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div>
<div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div> <div class="row">
<div class="cell">Detail cell</div>
<div class="cell">Detail cell</div>
</div>
</div>
</body>Upvotes: 0
Bhavin Solanki
Reputation: 4818
I have different approach. I suggest table base structure instead of using div base structure.
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
th, td {
padding: 0.25rem;
}
tr.red th {
background: red;
color: white;
}
tr.green th {
background: green;
color: white;
}
tr.purple th {
background: purple;
color: white;
}
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}<table>
<thead>
<tr class="red">
<th>Header Row 1</th>
<th>Header Row 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
<tr>
<td>Header Detail 1.</td>
<td>Header Detail 2.</td>
</tr>
</tbody>
</table>If you still want to use DIV structure, here is an example.
.wrap {
height: 80vh;
position: relative;
overflow: scroll;
margin: 10em auto 20em;
max-width: 960px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/*overscroll-behavior: contain;*/
}
.scenes {
display: flex;
flex-wrap: nowrap;
}
.track {
flex: 1 0 calc(22% + 7px);
scroll-snap-align: start;
}
.track + .track {
margin-left: -1px;
}
.heading {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0;
border: solid #fff;
border-width: 0 1px;
z-index: 1;
background: #efefef;
font-weight: 700;
}
.entry {
border: 1px solid #ebebeb;
border-top: 0;
background: #fff;
height: 8em;
padding: 1em;
}
@media (max-width: 767px) {
.track {
flex: 1 0 calc(50% + 7px);
}
}<div class="wrap">
<div class="scenes">
<div class="track">
<div class="heading">Heading 1</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
</div>
<div class="track">
<div class="heading">Heading 2</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
</div>
<div class="track">
<div class="heading">Heading 3</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
</div>
<div class="track">
<div class="heading">Heading 4</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
</div>
<div class="track">
<div class="heading">Heading 5</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
</div>
<div class="track">
<div class="heading">Heading 6</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
</div>
<div class="track">
<div class="heading">Heading 7</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem ipsum dolor sit.</h3>
</div>
</div>
</div>
</div>Upvotes: 0
s.kuznetsov
Reputation: 15213
As I mentioned in the comments, you need to set the top for the second sticky block. And this top should be equal to the height of the first sticky one. You can define each parent of a sticky block using pseudo class :nth-child().
30px is the approximate height of the first sticky block.
Take a look at the css code, and you will understand what I mean.
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
text-align: center;
padding: 5px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.sticky {
position: -webkit-sticky;
position: sticky;
background: red;
}
.row:nth-child(1) .sticky {
top: 0px;
}
.row:nth-child(2) .sticky {
top: 30px;
}
Upvotes: 2
John Doe
Reputation: 1424
I have added both the headers in a single sticky rows.
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
text-align: center;
padding: 5px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.sticky1, .sticky2, sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
background: red;
}<div class="table">
<div class="row">
<div class="cell sticky1"><span>Header Row 1</span>
<div class="cell sticky2"><span>Header Row 2</span>
</div>
</div>
<div class="row">
</div>
</div>
<div class="row">
<div class="cell">Detail Row 1</div>
</div>
<div class="row">
<div class="cell">Detail Row 2</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
<div class="row">
<div class="cell">Detail Row 3</div>
</div>
</div>Upvotes: 0
Related Questions
- How to make table header with 2 rows sticky?! (without js)
- Sticky table header with two header rows
- how to add position sticky on nested table?
- Position sticky to make table rows stick to each other
- CSS - sticky positioning of more than one row
- Table using position:sticky and display: grid
- How to make a table cell to stick on top and most left side of table at same time?
- Two sticky rows and one sticky column
- css position: sticky not working with display: table-row-group
- How to make complex thead sticky to top of window