Как сделать заголовки таблиц липкими при горизонтальной прокрутке?
Я работаю над макетом, в котором мне нужно, чтобы заголовок средней таблицы с горизонтальной прокруткой оставался прикрепленным вверху при вертикальной прокрутке. Заголовки левой и правой таблиц держатся нормально, но у меня возникли проблемы с заголовком средней таблицы (вероятно, из-за горизонтальной прокрутки).
https://codepen.io/Reynaldo-Rodriguez-the-sasster/pen/XWLqRxo
.container {
position: relative;
display: flex;
}
table th {
position: sticky;
top: 0;
background: white;
}
.table-center {
overflow-x: scroll;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: .5em 1em;
white-space: nowrap;
}
::-webkit-scrollbar {
-webkit-appearance: none;
background-color: transparent;
height: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgb(121 121 121);
box-shadow: none;
}
::-webkit-scrollbar-track {
background-color: white;
border: none;
}<div class = "container">
<div class = "table-left">
<table>
<tr>
<th>RIDER #</th>
<th>RIDER NAME</th>
</tr>
<tr>
<td>#322</td>
<td>Chase Lanes</td>
</tr>
<tr>
<td>#87</td>
<td>Marshall Holbrook</td>
</tr>
<tr>
<td>#567</td>
<td>Marshall Holbrook</td>
</tr>
<tr>
<td>#143</td>
<td>Marshall Holbrook</td>
</tr>
<tr>
<td>#322</td>
<td>Chase Lanes</td>
</tr>
<tr>
<td>#87</td>
<td>Marshall Holbrook</td>
</tr>
<tr>
<td>#567</td>
<td>Marshall Holbrook</td>
</tr>
<tr>
<td>#143</td>
<td>Marshall Holbrook</td>
</tr>
<tr>
<td>#322</td>
<td>Chase Lanes</td>
</tr>
<tr>
<td>#87</td>
<td>Marshall Holbrook</td>
</tr>
<tr>
<td>#567</td>
<td>Marshall Holbrook</td>
</tr>
<tr>
<td>#143</td>
<td>Marshall Holbrook</td>
</tr>
</table>
</div>
<div class = "table-center">
<table>
<tr>
<th>Lap 1</th>
<th>Lap 2</th>
<th>Lap 3</th>
<th>Lap 4</th>
<th>Lap 5</th>
<th>Lap 6</th>
<th>Lap 7</th>
<th>Lap 8</th>
<th>Lap 9</th>
<th>Lap 10</th>
<th>Lap 11</th>
<th>Lap 12</th>
<th>Lap 13</th>
<th>Lap 14</th>
<th>Lap 15</th>
<th>Lap 16</th>
<th>Lap 17</th>
<th>Lap 18</th>
<th>Lap 19</th>
<th>Lap 20</th>
<th>Lap 21</th>
<th>Lap 22</th>
<th>Lap 23</th>
<th>Lap 24</th>
<th>Lap 25</th>
<th>Lap 26</th>
<th>Lap 27</th>
<th>Lap 28</th>
<th>Lap 29</th>
<th>Lap 30</th>
</tr>
<tr>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
</tr>
<tr>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
</tr>
<tr>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
</tr>
<tr>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
</tr>
<tr>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
</tr>
<tr>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
</tr>
<tr>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
</tr>
<tr>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
</tr>
<tr>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
</tr>
<tr>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
</tr>
<tr>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
</tr>
<tr>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>00:02.826</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
<td>--:---:--</td>
</tr>
</table>
</div>
<div class = "table-right">
<table>
<tr>
<th>FASTEST LAP</th>
<th>AVG LAP</th>
<th>OVERALL TIME</th>
</tr>
<tr>
<td>00:00</td>
<td>00:00</td>
<td>00:00</td>
</tr>
<tr>
<td>00:00</td>
<td>00:00</td>
<td>00:00</td>
</tr>
<tr>
<td>00:00</td>
<td>00:00</td>
<td>00:00</td>
</tr>
<tr>
<td>00:00</td>
<td>00:00</td>
<td>00:00</td>
</tr>
<tr>
<td>00:00</td>
<td>00:00</td>
<td>00:00</td>
</tr>
<tr>
<td>00:00</td>
<td>00:00</td>
<td>00:00</td>
</tr>
<tr>
<td>00:00</td>
<td>00:00</td>
<td>00:00</td>
</tr>
<tr>
<td>00:00</td>
<td>00:00</td>
<td>00:00</td>
</tr>
<tr>
<td>00:00</td>
<td>00:00</td>
<td>00:00</td>
</tr>
<tr>
<td>00:00</td>
<td>00:00</td>
<td>00:00</td>
</tr>
<tr>
<td>00:00</td>
<td>00:00</td>
<td>00:00</td>
</tr>
<tr>
<td>00:00</td>
<td>00:00</td>
<td>00:00</td>
</tr>
</table>
</div>
</div>Этот ответ может решить вашу проблему.
—
31.08.2024 08:55
Мне удалось решить эту проблему с помощью JS и TranslateY. Если вам интересно, обновленная версия уже доступна в коде.
—
04.09.2024 19:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
78
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Вы можете попробовать это.
При такой структуре левый и средний заголовки останутся прикрепленными вверху, в то же время позволяя горизонтальную и вертикальную прокрутку в средней области содержимого. Средняя область содержимого может прокручиваться по горизонтали, а заголовки останутся фиксированными, обеспечивая пользователю стабильный вид.
Ключевым моментом является обеспечение того, чтобы заголовки таблиц находились в контейнере, независимом от тела таблицы, что позволяет им оставаться липкими.
<div class = "container">
<div class = "side-table-wrapper">
<table class = "side-table">
<thead>
<tr>
<th>Side Header 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Side Row 1</td>
</tr>
<!-- More rows -->
</tbody>
</table>
</div>
<div class = "middle-table-wrapper">
<div class = "middle-table-header">
<table class = "middle-table">
<thead>
<tr>
<th>Middle Header 1</th>
<th>Middle Header 2</th>
<!-- More headers -->
</tr>
</thead>
</table>
</div>
<div class = "middle-table-body">
<table class = "middle-table">
<tbody>
<tr>
<td>Middle Row 1 Col 1</td>
<td>Middle Row 1 Col 2</td>
<!-- More columns -->
</tr>
<!-- More rows -->
</tbody>
</table>
</div>
</div>
<div class = "side-table-wrapper">
<table class = "side-table">
<thead>
<tr>
<th>Side Header 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Side Row 1</td>
</tr>
<!-- More rows -->
</tbody>
</table>
</div>
</div>
.container {
display: flex;
}
.side-table-wrapper {
flex: 0 0 auto;
width: 150px;
}
.middle-table-wrapper {
flex: 1;
position: relative;
}
.middle-table-header {
overflow: hidden;
position: sticky;
top: 0;
z-index: 10;
}
.middle-table-body {
overflow-x: auto; /* Enable horizontal scrolling */
overflow-y: auto; /* Enable vertical scrolling */
max-height: 400px; /* Adjust based on your needs */
}
.middle-table th,
.side-table th {
position: sticky;
top: 0;
background-color: white;
z-index: 2;
}
Ответ принят как подходящий
Мне удалось решить эту проблему с помощью JS и TranslateY. Если вам интересно, обновленная версия уже доступна в коде.
const middleTable = document.getElementById('middleTable');
const stickyMiddleHeader = document.getElementById('stickyMiddleHeader');
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const tableOffsetTop = middleTable.getBoundingClientRect().top + window.scrollY;
const translateY = scrollTop > tableOffsetTop ? scrollTop - tableOffsetTop : 0;
stickyMiddleHeader.style.transform = `translateY(${translateY}px)`;});
Другие вопросы по теме
Как исправить элементы div на краю большего элемента div
Как отобразить текст поверх изображения без отображения цвета фона
Как я могу назначить iframe для внутреннего HTML элемента div?
Невозможно заставить JavaScript отправить форму при выполнении условия
Круг SVG, каков процент радиуса?
Боковая панель прилипает к верхней части страницы, а не к верхней части экрана
Как сделать так, чтобы панель поиска располагалась вертикально?
Как заставить расположенные рядом элементы div в гибком контейнере обертывать свое содержимое перед тем, как обернуть себя
Разделите заголовки знаком «-» в Wordpress
Как раскрасить столбец таблицы определенным классом в заголовке с помощью CSS?
Похожие вопросы
Как заставить React CountUp считать от предыдущего числа?
Добавить новые строки перед выбранными символами дефиса
Понимание карты с оператором запятой
Написание Regex для обработки дополнительных символов с плавающей запятой в начале строки?
Игнорирует ли однопоточная эмуляция Blazor Server взаимодействие с JavaScript?
Как я могу назначить iframe для внутреннего HTML элемента div?
Мне нужно несколько функций в AG Grid
Невозможно заставить JavaScript отправить форму при выполнении условия
Javascript, сопоставьте массив объектов для возврата нового массива
Как вернуть правильный массив для f (0), оптимизированного для хвостового вызова Фибоначчи?