Как я могу приклеить несколько элементов рядом друг с другом? ⇐ CSS

[Anonymous]

Я пытаюсь реализовать сценарий, в котором один заголовок будет прикреплен, за ним следует прикрепленный подзаголовок, а затем заголовок таблицы.
В этой настройке я хочу, чтобы .first класс становится липким при прокрутке, .второй класс — для прокрутки, . Third класс — липким после первого класса и, наконец, заголовок таблицы становится липким после второго класса. Пожалуйста, просмотрите код, с которым я работаю.
Заранее спасибо за попытку мне помочь.



Page Title


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

}





I am first sticky
I am not sticky
I am second sticky

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.

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.







Header 1
Header 2
Header 3









Data 1
Data 2
Data 3













Подробнее здесь: https://stackoverflow.com/questions/784 ... each-other