Thiết kế website giá rẻ

Question

I’m attempting a scenario where one header will be sticky, followed by a subheader which is sticky, and then followed by a table header.

In this setup, I want the .first class to become sticky upon scrolling, the .second class to scroll, the .third class to become sticky after the first class, and finally, the table header to become sticky after the second class. Please review the code I’m working with.

Thanks in advanced for trying to help me.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

.content {
  max-height: calc(100vh - 20px); /* Example height, adjust as needed */
  overflow-y: auto; /* Add vertical scrollbar if needed */
}

.table-container {
  position: relative; /* Ensure relative positioning for the sticky header */
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f1f1f1; /* Example background color */
  position: sticky;
  top: 75;
  z-index: 3; /* Ensure the headers are above the table content */
}

th {
  position: sticky;
  top: 75;
}

tbody tr:nth-child(even) {
  background-color: #f2f2f2; /* Example alternating row color */
}

.first {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 25px;
}

.third {
  position: sticky;
  top: 25;
  z-index: 2;
  height: 25px;
  
}


</style>
</head>
<body>
<div class="content">
    <p class="first">I am first sticky </p>
    <p class="second"> I am not sticky </p>
    <p class="third"> I am second sticky </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tincidunt lorem. Nulla facilisi. Duis et tellus ut nulla facilisis fermentum. Aliquam volutpat, risus eget eleifend fringilla, leo mauris vestibulum libero, id vehicula odio elit et lorem. Morbi lacinia tristique justo a consectetur. Aliquam tempus urna vitae enim faucibus, vitae ultrices risus fermentum. Proin rutrum, nunc sed pellentesque congue, tortor neque hendrerit mi, ac ultricies dui nisl vel metus. Fusce auctor dolor ut odio accumsan, non ultricies lacus sodales.
  </p>
  <p>
    Sed sed nisi at tortor ultricies hendrerit nec quis elit. Vivamus malesuada tellus nec dui viverra, nec fermentum dolor scelerisque. Donec dignissim mi vitae nisi fermentum fringilla. Sed ut lorem neque. Proin vestibulum, velit ut fringilla auctor, velit dui dapibus arcu, eget aliquam nisi arcu non dui. Mauris malesuada purus vitae sollicitudin fermentum. Nulla facilisi. Ut vel metus quis justo pellentesque feugiat vitae ut felis. Curabitur condimentum orci sit amet diam eleifend, ut luctus lorem dapibus. 
  </p>
  <!-- Add more paragraphs as needed -->

  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <!-- Add 100 rows -->
        <!-- Example: -->
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr><tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <!-- Repeat this row 100 times -->
        <!-- You can use JavaScript to generate these rows dynamically -->
        <!-- For simplicity, I'll copy this row 99 times -->
        <!-- Start copying from here -->
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <!-- Repeat this row 99 times -->
        <!-- End copying here -->
      </tbody>
    </table>
  </div>
</div>



</body>
</html>

Thiết kế website giá rẻ

Danh mục

How can I make multiple element sticky next to each other?