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

Triggering an event from a Nativescript application through a webview

Creating Dynamic Height for Div Based on Another Element's Height Using ReactJS and CSS

What is the best way to display the complete text or wrap a menu item in an Angular Material menu?

Conceal only the anchor tag's text and include a class during the media query

Issue with Material UI React: Navbar does not properly align the box to the right side

External JavaScript file not executing defined function

What's the best way to loop through each touch event property within the TouchList of a touch event using JavaScript?

The dropdown within the modal is proving elusive for Selenium to locate

I am looking to use flexbox and Vue.js to organize my sent messages in blue on the right and received messages in yellow on the left. How can I achieve this grouping effectively?

What is the best way to choose a date and time in a custom format within my React application?

The functionality of @Output and custom events appears to be malfunctioning

What is the best way to set up a dropdown menu in a data grid where the width matches the fields?

What is the reason for the index.html file not connecting to the local .css files and .js file?

issue with excessive content overflow

What is the process of turning a picture from a menu file into a clickable link?

Tips for styling Pandas dataframe using IPython HTML display

Using PHPMailer in conjunction with a textarea form and HTML

What is the best way to utilize jQuery to expand an HTML form?

Can you transform a component with inputs into plain HTML code?

What is the best way to limit the size of a table?