CSS - ensure that two elements with display: table-row stay stacked on top of one another

Question

CSS - ensure that two elements with display: table-row stay stacked on top of one another

I came across this HTML structure

.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 successfully makes the second Header Row sticky, just as intended. However, I am wondering how to make both Header Rows sticky on top of each other. This way, both rows remain visible when the user scrolls the page.

html css sticky

Answer 1

Answer №1

To ensure the second sticky block behaves correctly, it is crucial to set the top property. This value should match the height of the first sticky block. Utilize the pseudo class :nth-child() to target each parent element containing a sticky block.

The height of the initial sticky block is approximately 30px.

Review the provided CSS code for further clarification on this concept.

.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;
}

Answer 2

To ensure the second sticky block behaves correctly, it is crucial to set the top property. This value should match the height of the first sticky block. Utilize the pseudo class :nth-child() to target each parent element containing a sticky block.

The height of the initial sticky block is approximately 30px.

Review the provided CSS code for further clarification on this concept.

.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;
}

Answer 3

Answer №2

Incorporated both headers into a unified sticky row.

.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>

Answer 4

Incorporated both headers into a unified sticky row.

.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>

Answer 5

Answer №3

My suggestion is to take a different approach by using a table-based structure rather than a div-based 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>
    ... (more table rows)
  </tbody>
</table>

If you still prefer using a DIV structure, here's 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;
}

.scenes {
  display: flex;
  flex-wrap: nowrap;
}

.track {
  flex: 1 0 calc(22% + 7px);
  scroll-snap-align: start;
}

... (more CSS rules)

@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 sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      ... (more entries)
    </div>
    ... (more tracks)
  </div>
</div>

Answer 6

My suggestion is to take a different approach by using a table-based structure rather than a div-based 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>
    ... (more table rows)
  </tbody>
</table>

If you still prefer using a DIV structure, here's 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;
}

.scenes {
  display: flex;
  flex-wrap: nowrap;
}

.track {
  flex: 1 0 calc(22% + 7px);
  scroll-snap-align: start;
}

... (more CSS rules)

@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 sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      ... (more entries)
    </div>
    ... (more tracks)
  </div>
</div>

Answer 7

Answer №4

In an actual table structure, the use of thead, tbody, or tfoot tags is essential for grouping multiple rows together to maintain their position. To replicate the behavior of a tbody, the table-row-group property in CSS can be utilized :

https://developer.mozilla.org/en-US/docs/Web/CSS/display

table-row-group

table-header-group

table-footer-group

These elements function similarly to HTML elements.

A possible scenario below maintains the layout of the table and focuses on handling groups of rows rather than individual 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>
    <!-- Additional rows with detail cells -->

  </div>
</body>

Answer 8

In an actual table structure, the use of thead, tbody, or tfoot tags is essential for grouping multiple rows together to maintain their position. To replicate the behavior of a tbody, the table-row-group property in CSS can be utilized :

https://developer.mozilla.org/en-US/docs/Web/CSS/display

table-row-group

table-header-group

table-footer-group

These elements function similarly to HTML elements.

A possible scenario below maintains the layout of the table and focuses on handling groups of rows rather than individual 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>
    <!-- Additional rows with detail cells -->

  </div>
</body>

CSS - ensure that two elements with display: table-row stay stacked on top of one another

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Blackberry - Printing HTML String within a text box

Issue with alignment on the printed version of an HTML document

Extracting information from CSS code

Is it possible to examine elements within Outlook?

Ways to ensure your page stays confidential

Swiper.IO pagination indicators not displaying

What is the way to change the background color using HTML5 getItem?

Issue with displaying elements at intended layering order when parent element has fixed positioning

Display one div and conceal all others

Is there a way to hide my jQuery menu?

Learn the method for printing CSS outlines and background colors in IE8 using JQuery's printElement feature

The hamburger menu on the navigation bar only functions the first time it is clicked

Error: Unable to run 'play' on 'HTMLMediaElement': Invocation not allowed

Unable to locate a resolution for the error message "Warning: Task "uglify" not found"

Creating a menu with items and listeners from a kmllayer - a step-by-step guide

Troubleshooting: ReactJS CSS Class Issue

How to retrieve FormData data using Axios

When viewed on mobile devices, the image shrinks significantly

Is it possible for me to alter the script for my button's onclick

Creating unique styles with styled components without the use of selectors