Я пытаюсь создать сетку с горизонтальным и вертикальным расположением, а также с прикрепленным заголовком и первым столбцом.
Я использую это, чтобы получить заголовок липким
.thead {
position: sticky;
top: 0px;
}
Я использую это, чтобы сделать первый столбец липким.
div.tbody>div.tr>div:nth-child(1) {
position: sticky;
left: 0;
}
.thead>div>div:nth-child(1){
left:0;
top:0;
position: sticky;
}
Но я получаю странное поведение прокрутки, что заголовок первого столбца прикреплен слева, но не вверх.
Вот код, который я использовал. Как я могу заставить это работать так, чтобы заголовок первого столбца прилипал как к левой, так и к верхней части?
.fixed_header {
width: 300px;
height: 300px;
overflow: scroll;
}
.td,
.th {
background-color: antiquewhite;
width: 100px;
float: left;
}
.thead {
position: sticky;
top: 0px;
}
.th {
font-weight: bold;
}
.tr {
display: block;
clear: both;
width: 500px;
}
.thead>div>div:nth-child(1) {
left: 0;
top: 0;
position: sticky;
}
div.tbody>div.tr>div:nth-child(1) {
position: sticky;
left: 0;
}
<div class="fixed_header">
<div class="thead">
<div class="tr">
<div class="th">Col 1</div>
<div class="th">Col 2</div>
<div class="th">Col 3</div>
<div class="th">Col 4</div>
<div class="th">Col 5</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">row 1-0</div>
<div class="td">row 1-1</div>
<div class="td">row 1-2</div>
<div class="td">row 1-3</div>
<div class="td">row 1-4</div>
</div>
<div class="tr">
<div class="td">row 2-0</div>
<div class="td">row 2-1</div>
<div class="td">row 2-2</div>
<div class="td">row 2-3</div>
<div class="td">row 2-4</div>
</div>
<div class="tr">
<div class="td">row 3-0</div>
<div class="td">row 3-1</div>
<div class="td">row 3-2</div>
<div class="td">row 3-3</div>
<div class="td">row 3-4</div>
</div>
<div class="tr">
<div class="td">row 4-0</div>
<div class="td">row 4-1</div>
<div class="td">row 4-2</div>
<div class="td">row 4-3</div>
<div class="td">row 4-4</div>
</div>
<div class="tr">
<div class="td">row 5-0</div>
<div class="td">row 5-1</div>
<div class="td">row 5-2</div>
<div class="td">row 5-3</div>
<div class="td">row 5-4</div>
</div>
<div class="tr">
<div class="td">row 6-0</div>
<div class="td">row 6-1</div>
<div class="td">row 6-2</div>
<div class="td">row 6-3</div>
<div class="td">row 6-4</div>
</div>
<div class="tr">
<div class="td">row 7-0</div>
<div class="td">row 7-1</div>
<div class="td">row 7-2</div>
<div class="td">row 7-3</div>
<div class="td">row 7-4</div>
</div>
<div class="tr">
<div class="td">row 1-0</div>
<div class="td">row 1-1</div>
<div class="td">row 1-2</div>
<div class="td">row 1-3</div>
<div class="td">row 1-4</div>
</div>
<div class="tr">
<div class="td">row 2-0</div>
<div class="td">row 2-1</div>
<div class="td">row 2-2</div>
<div class="td">row 2-3</div>
<div class="td">row 2-4</div>
</div>
<div class="tr">
<div class="td">row 3-0</div>
<div class="td">row 3-1</div>
<div class="td">row 3-2</div>
<div class="td">row 3-3</div>
<div class="td">row 3-4</div>
</div>
<div class="tr">
<div class="td">row 4-0</div>
<div class="td">row 4-1</div>
<div class="td">row 4-2</div>
<div class="td">row 4-3</div>
<div class="td">row 4-4</div>
</div>
<div class="tr">
<div class="td">row 5-0</div>
<div class="td">row 5-1</div>
<div class="td">row 5-2</div>
<div class="td">row 5-3</div>
<div class="td">row 5-4</div>
</div>
<div class="tr">
<div class="td">row 6-0</div>
<div class="td">row 6-1</div>
<div class="td">row 6-2</div>
<div class="td">row 6-3</div>
<div class="td">row 6-4</div>
</div>
<div class="tr">
<div class="td">row 7-0</div>
<div class="td">row 7-1</div>
<div class="td">row 7-2</div>
<div class="td">row 7-3</div>
<div class="td">row 7-4</div>
</div>
<div class="tr">
<div class="td">row 1-0</div>
<div class="td">row 1-1</div>
<div class="td">row 1-2</div>
<div class="td">row 1-3</div>
<div class="td">row 1-4</div>
</div>
<div class="tr">
<div class="td">row 2-0</div>
<div class="td">row 2-1</div>
<div class="td">row 2-2</div>
<div class="td">row 2-3</div>
<div class="td">row 2-4</div>
</div>
<div class="tr">
<div class="td">row 3-0</div>
<div class="td">row 3-1</div>
<div class="td">row 3-2</div>
<div class="td">row 3-3</div>
<div class="td">row 3-4</div>
</div>
<div class="tr">
<div class="td">row 4-0</div>
<div class="td">row 4-1</div>
<div class="td">row 4-2</div>
<div class="td">row 4-3</div>
<div class="td">row 4-4</div>
</div>
<div class="tr">
<div class="td">row 5-0</div>
<div class="td">row 5-1</div>
<div class="td">row 5-2</div>
<div class="td">row 5-3</div>
<div class="td">row 5-4</div>
</div>
<div class="tr">
<div class="td">row 6-0</div>
<div class="td">row 6-1</div>
<div class="td">row 6-2</div>
<div class="td">row 6-3</div>
<div class="td">row 6-4</div>
</div>
<div class="tr">
<div class="td">row 7-0</div>
<div class="td">row 7-1</div>
<div class="td">row 7-2</div>
<div class="td">row 7-3</div>
<div class="td">row 7-4</div>
</div>
</div>
</div>