Как иметь горизонтальную полосу прокрутки в таблице и вертикальную полосу прокрутки на основной странице, а также исполь ⇐ CSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как иметь горизонтальную полосу прокрутки в таблице и вертикальную полосу прокрутки на основной странице, а также исполь

Сообщение Anonymous »

Очень сложно объяснить в заголовке, что мне нужно, поэтому вот пример.
Это моя таблица:

Код: Выделить всё

body {
margin: 0;
padding: 0;
}

header {
margin-bottom: 15px;
display: flex;
justify-content: center;
}

.header__info-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}

.infoboard__wrapper {
display: flex;
gap: 15px;
background-color: #f1f1f1;
padding: 5px 10px;
border-radius: 10px;
}

.title {
font-size: 30px;
font-weight: bold;
}

.view {
margin: auto;
width: 100vw;
}

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

table-layout: fixed;
}

th {
position: sticky;
top:0;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
background-color: white;
box-sizing: border-box;
}

table th:not(:nth-child(1)):not(:nth-child(2)) {
width: 300px;
}

tr:nth-child(even) td {
background-color: #dddddd;
}

.wrapper {
position: relative;
/* overflow-x: auto; */
height: 100vh;
}

.sticky-col {
position: sticky;
z-index: 1;
}

th.sticky-col{
z-index: 2;
}

.first-col {
width: 150px;
min-width: 150px;
max-width: 150px;
left: 0;
}

.second-col {
width: 150px;
min-width: 150px;
max-width: 150px;
left: 100px;
}

.wrapped-content{
width: 250px;
white-space:  n o r m a l ; < b r   / > } < / c o d e > < b r   / > < p r e   c l a s s = " s n i p p e t - c o d e - h t m l   l a n g - h t m l   P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; h e a d e r & g t ; < b r   / >         & l t ; d i v   c l a s s = " h e a d e r _ _ i n f o - w r a p p e r " & g t ; < b r   / >             & l t ; d i v   c l a s s = " t i t l e " & g t ; S o m e   T i t l e & l t ; / d i v & g t ; < b r   / >             & l t ; d i v   c l a s s = " i n f o b o a r d _ _ w r a p p e r " & g t ; < b r   / >                 & l t ; d i v   c l a s s = " b a s i c _ _ i n f o " & g t ; < b r   / >                     & l t ; d i v & g t ; T o t a l   N u m b e r : & l t ; / d i v & g t ; < b r   / >                     & l t ; d i v & g t ; < b r   / >                         & l t ; i f x - n u m b e r - i n d i c a t o r   i d = " n u m b e r _ _ i n d i c a t o r - t o t a l " & g t ; & l t ; / i f x - n u m b e r - i n d i c a t o r & g t ; < b r   / >                     & l t ; / d i v & g t ; < b r   / >                 & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v   c l a s s = " b a s i c _ _ i n f o " & g t ; < b r   / >                     & l t ; d i v & g t ; C o m p l e t e d : & l t ; / d i v & g t ; < b r   / >                     & l t ; d i v & g t ; < b r   / >                         & l t ; i f x - n u m b e r - i n d i c a t o r   i d = " n u m b e r _ _ i n d i c a t o r - c o m p l e t e d " & g t ; & l t ; / i f x - n u m b e r - i n d i c a t o r & g t ; < b r   / >                     & l t ; / d i v & g t ; < b r   / >                 & l t ; / d i v & g t ; < b r   / >                 & l t ; d i v   c l a s s = " b a s i c _ _ i n f o " & g t ; < b r   / >                     & l t ; d i v & g t ; P l a n n e d : & l t ; / d i v & g t ; < b r   / >                     & l t ; d i v & g t ; < b r   / >                         & l t ; i f x - n u m b e r - i n d i c a t o r   i d = " n u m b e r _ _ i n d i c a t o r - p l a n n e d " & g t ; & l t ; / i f x - n u m b e r - i n d i c a t o r & g t ; < b r   / >                     & l t ; / d i v & g t ; < b r   / >                 & l t ; / d i v & g t ; < b r   / >             & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >     & l t ; / h e a d e r & g t ; < b r   / > < b r   / >     & l t ; d i v   c l a s s = " v i e w " & g t ; < b r   / >         & l t ; d i v   c l a s s = " w r a p p e r " & g t ; < b r   / >             & l t ; t a b l e   c l a s s = " t a b l e " & g t ; < b r   / >                 & l t ; t h e a d & g t ; < b r   / >                     & l t ; t r & g t ; < b r   / >                         & l t ; t h   c l a s s = " s t i c k y - c o l   f i r s t - c o l " & g t ; P r e v i e w & l t ; / t h & g t ; < b r   / >                         & l t ; t h   c l a s s = " s t i c k y - c o l   s e c o n d - c o l " & g t ; C o m p o n e n t & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; V e r s i o n   1 & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; V e r s i o n   2 & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; V e r s i o n   3 & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; V e r s i o n   4 & l t ; / t h & g t ; < b r   / >                         & l t ; t h & g t ; V e r s i o n   5 & l t ; / t h & g t ; < b r   / > < b r   / >                     & l t ; / t r & g t ; < b r   / >                 & l t ; / t h e a d & g t ; < b r   / >                 & l t ; t b o d y & g t ; < b r   / >                     & l t ; t r & g t ; < b r   / >                         & l t ; t d   c l a s s = " s t i c k y - c o l   f i r s t - c o l " & g t ; 1 & l t ; / t d & g t ; < b r   / >                         & l t ; t d   c l a s s = " s t i c k y - c o l   s e c o n d - c o l " & g t ; M a r k & l t ; / t d & g t ; < b r   / >                         & l t ; t d & g t ; H a m & l t ; / t d & g t ; < b r   / >                         & l t ; t d & g t ; M i c r o & l t ; / t d & g t ; < b r   / >                     & l t ; / t r & g t ; < b r   / >                     & l t ; t r & g t ; < b r   / >                         & l t ; t d   c l a s s = " s t i c k y - c o l   f i r s t - c o l " & g t ; 2 & l t ; / t d & g t ; < b r   / >                         & l t ; t d   c l a s s = " s t i c k y - c o l   s e c o n d - c o l " & g t ; J a c o b & l t ; / t d & g t ; < b r   / >                         & l t ; t d & g t ; S m i t h & l t ; / t d & g t ; < b r   / >                         & l t ; t d & g t ; A d o b   A d o b   A d o b   A d o b A d o b   A d o b   A d o b   A d o b   A d o b & l t ; / t d & g t ; < b r   / >                     & l t ; / t r & g t ; < b r   / >                     & l t ; t r & g t ; < b r   / >                         & l t ; t d   c l a s s = " s t i c k y - c o l   f i r s t - c o l " & g t ; 3 & l t ; / t d & g t ; < b r   / >                         & l t ; t d   c l a s s = " s t i c k y - c o l   s e c o n d - c o l " & g t ; L a r r y & l t ; / t d & g t ; < b r   / >                         & l t ; t d & g t ; W e n & l t ; / t d & g t ; < b r   / >                         & l t ; t d & g t ; & l t ; d i v   c l a s s = " w r a p p e d - c o n t e n t " & g t ; G o o g   G o o g   G o o g   G o o g G o o g   G o o g   G o o g   G o o g   G o o g   G o o g   G o o g   G o o g & l t ; / d i v & g t ; & l t ; / t d & g t ; < b r   / >                     & l t ; / t r & g t ; < b r   / >                     & l t ; t r & g t ; < b r   / >                         & l t ; t d   c l a s s = " s t i c k y - c o l   f i r s t - c o l " & g t ; 3 & l t ; / t d & g t ; < b r   / >                         & l t ; t d   c l a s s = " s t i c k y - c o l   s e c o n d - c o l " & g t ; L a r r y & l t ; / t d & g t ; < b r   / >                         & l t ; t d & g t ; W e n & l t ; / t d & g t ; < b r   / >                         & l t ; t d & g t ; G o o g   G o o g   G o o g   G o o g G o o g   G o o g   G o o g   G o o g   G o o g   G o o g & l t ; / t d & g t ; < b r   / >                     & l t ; / t r & g t ; < b r   / >                     & l t ; t r & g t ; < b r   / >                         & l t ; t d   c l a s s = " s t i c k y - c o l   f i r s t - c o l " & g t ; 4 & l t ; / t d & g t ; < b r   / >                         & l t ; t d   c l a s s = " s t i c k y - c o l   s e c o n d - c o l " & g t ; L a r r y & l t ; / t d & g t ; < b r   / >                         & l t ; t d & g t ; W e n & l t ; / t d & g t ; < b r   / >                         & l t ; t d & g t ; G o o g   G o o g   G o o g   G o o g G o o g   G o o g   G o o g   G o o g   G o o g   G o o g & l t ; / t d & g t ; < b r   / >                     & l t ; / t r & g t ; < b r   / >                     & l t ; t r & g t ; < b r   / >                        5
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


6
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


7
Larry
Wen
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog


Это именно то поведение, которое мне нужно! Исправлено th и исправлены первые два столбца + фиксированная горизонтальная полоса прокрутки.
Проблема в том, что, поскольку горизонтальная полоса прокрутки появляется на теле, все тело движется! Таким образом, содержимое внутри заголовка тоже перемещается. Я не хочу этого. Я хочу, чтобы горизонтальная полоса прокрутки перемещала только содержимое внутри таблицы, а не все тело. Я хочу, чтобы вертикальная полоса прокрутки находилась на теле, чтобы вся страница могла прокручиваться вниз.
Если вы раскомментируете overflow-x: auto;, то горизонтальная полоса прокрутки переместит содержимое таблицы, но вертикальная полоса прокрутки перемещает только содержимое таблицы, а не все тело, чего я и хочу! Кроме того, из-за содержимого заголовка на самом деле есть две полосы прокрутки.
Как добиться того, чего я хочу? Как сделать так, чтобы горизонтальная полоса прокрутки перемещала только содержимое таблицы, а вертикальная — всю страницу?
Обновление:
Скриншоты td border перед движением прокрутки.
Изображение

Снимки экрана границы td после перемещения прокрутки.
Изображение

Скриншоты границы перед прокруткой.
Изображение

Скриншоты границы после перемещения прокрутки.
Изображение

Границы не совпадают:
[img]https://i.stack.imgur .com/huK45.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/783 ... n-the-body
Вернуться к началу
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»