Как создать таблицу с прикрепленным столбцом слева и справа, а тело между ними можно прокручивать? ⇐ CSS

[Anonymous]

Я уже несколько часов работаю над фрагментом кода, пытаясь добиться желаемого макета таблицы. Однако каждый раз, когда я вношу изменения в код, таблица искажается или ведет себя неожиданно. Моя цель — создать полосу прокрутки, которая отображается только для прокручиваемого содержимого таблицы, а не для всей таблицы. Кроме того, я хочу, чтобы полоса прокрутки располагалась конкретно внизу области прокручиваемого содержимого.
Пожалуйста, помогите мне в этом. Спасибо!

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

.table-scroll {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
height: 50vh;
width: 1000px;
}

.table-scroll table {
width: 100%;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}

.table-scroll th,
.table-scroll td {
padding: 5px 10px;
border: 1px solid #000;
background: #fff;
vertical-align: top;
text-align: center;
}

.table-scroll thead th {
background: #333;
color: #fff;
top: 0;
z-index: 1;
}

th.sticky-left,
td.sticky-left {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 4;
background: #ccc;
}

th.sticky-left:nth-child(2),
td.sticky-left:nth-child(2) {
position: -webkit-sticky;
position: sticky;
left: 70px;
z-index: 10;
background: #ccc;
}

th.sticky-right,
td.sticky-right {
position: -webkit-sticky;
position: sticky;
right: 0;
z-index: 4;
background:  # c c c ; < 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 ; d i v   c l a s s = " t a b l e - s c r o l l " & g t ; < b r   / >         & l t ; t a b l e   b o r d e r = " 1 " & 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 - l e f t   w - 3 2 "   r o w s p a n = " 2 " & g t ; D A T E & l t ; / t h & g t ; < b r   / >                     & l t ; t h   c l a s s = " s t i c k y - l e f t   w - 3 2 "   r o w s p a n = " 2 " & g t ; D A T E 2 & l t ; / t h & g t ; < b r   / >                     & l t ; t h   c o l s p a n = " 1 0 " & g t ; L I N E   1 & l t ; / t h & g t ; < b r   / >                     & l t ; t h   c o l s p a n = " 1 0 " & g t ;LINE 2

LINE 3


SENSOR 1
SENSOR 2
SENSOR 3
SENSOR 4
SENSOR 5
SENSOR 6
SENSOR 7
SENSOR 8
SENSOR 9
SENSOR 10
SENSOR 1
SENSOR 2
SENSOR 3
SENSOR 4
SENSOR 5
SENSOR 6
SENSOR 7
SENSOR 8
SENSOR 9
SENSOR 10




VALUE 1
VALUE 1
SENSOR DATA 1
SENSOR DATA 2
SENSOR DATA 3
SENSOR DATA 4
SENSOR DATA 5
SENSOR DATA 6
SENSOR DATA 7
SENSOR DATA 8
SENSOR DATA 9
SENSOR DATA 10
SENSOR DATA 1
SENSOR DATA 2
SENSOR DATA 3
SENSOR DATA 4
SENSOR DATA 5
SENSOR DATA 6
SENSOR DATA 7
SENSOR DATA 8
SENSOR DATA 9
SENSOR DATA 10
VALUE 1


VALUE 2
VALUE 2
SENSOR DATA 1
SENSOR DATA 2
SENSOR DATA 3
SENSOR DATA 4
SENSOR DATA 5
SENSOR DATA 6
SENSOR DATA 7
SENSOR DATA 8
SENSOR DATA 9
SENSOR DATA 10
SENSOR DATA 1
SENSOR DATA 2
SENSOR DATA 3
SENSOR DATA 4
SENSOR DATA 5
SENSOR DATA 6
SENSOR DATA 7
SENSOR DATA 8
SENSOR DATA 9
SENSOR DATA 10
VALUE 2


VALUE 1
VALUE 1
SENSOR DATA 1
SENSOR DATA 2
SENSOR DATA 3
SENSOR DATA 4
SENSOR DATA 5
SENSOR DATA 6
SENSOR DATA 7
SENSOR DATA 8
SENSOR DATA 9
SENSOR DATA 10
SENSOR DATA 1
SENSOR DATA 2
SENSOR DATA 3
SENSOR DATA 4
SENSOR DATA 5
SENSOR DATA 6
SENSOR DATA 7
SENSOR DATA 8
SENSOR DATA 9
SENSOR DATA 10
VALUE 1

Подробнее здесь: https://stackoverflow.com/questions/792 ... dy-between