Table with fixed header in Grid

@ipsorokin · Регистрация: 06.03.2016

Студворк — интернет-сервис помощи студентам

Добрый день/вечер/ночь)))

Подскажите, в чем проблема (помимо того, что я ничего не знаю).
Есть grid (3 column, 2 row), в нем на три столбца таблица. Но она никак не хочет в него помещаться при переполнении.
Что должно быть в итоге: скоролиться должна только таблица в пределах блока, куда она вложена (т.е. пределах второй строки, куда вложен этот самый блок), шапка ее фиксирована.

Как нужно исправить orders.html, чтоб блок с таблицей работал как в файле table.html?
Если можно, то объясните на пальцах)))

ps если задавать высоту контейнера с таблицей, то как подсчитать нужную через calc

@NTHing · 07.11.2020, 10:45

Посмотрите, вот так нормально?

CSS
1
2
3
4
5
6
table th {
    position: sticky;
}
.table-container {
    max-height: 100vh;
}

@ipsorokin · 07.11.2020, 11:14 **[ТС]**

Ничего не поменялось. Полосы прокрутки по прежнему на всю страницу. Таблица растягивается вниз на сколько ей надо. Футер уезжает еще ниже. Справа появляется скрол и, как следствие, из-за этого добавляется еще внизу. Если выставить, например, max-height: 500px; то будет как надо, НО таблица должны быть до конца блока main.

@ipsorokin · 07.11.2020, 11:17 **[ТС]**

Извиняюсь, да, таблица должна так работать, но скрол только у нее должен быть, и за рамки родителя не должны вылезать.

@NTHing · 07.11.2020, 22:36

Помощь ещё нужна? Тогда давайте заново. Добавьте пока только это:

CSS
1
2
3
.table-container {
    max-height: 100vh;
}

И распишите по пунктам какой элемент и как должен вести себя. Например, пункт 1, элемент такой-то сейчас ведёт себя так, а мне нужно, чтобы вот так.

@ipsorokin · 07.11.2020, 23:11 **[ТС]**

Я хз как объяснить. Если задать max-height: любое число, например 500px. то таблица будет работать как надо. Но нужно что бы ее нижняя граница не вылезала за пределы блока и не растягивала. т.е. в целом не должно быть прокрутки документа. Таблица должны находиться в .table-container, а контейнер во второй строке основного div.

как должно работать-во вложении. т.е. таблица находиться в ячейке грида и никуда за его пределы не уходит, тут же так не работает. почему-не знаю

Возможно как-то связано с установкой размеров сетки

@NTHing · 07.11.2020, 23:40

Снова делаем откат в самое начало. Если это добавить, то всё работает как надо, или будут ещё замечания?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.body-container > aside:nth-child(1) {
  height: 45%;
}
.body-container > main:nth-child(2) {
  height: 55%;
}
body > header:nth-child(1) {
  height: 12%;
}
.body-container {
  height: 85%;
}
.body-container > aside:nth-child(1) {
  height: 45%;
}
.body-container > main:nth-child(2) {
  height: 55%;
}

@ipsorokin · 08.11.2020, 00:32 **[ТС]**

Чет это совсем не то, как мне кажется. Может, конечно, что-то не так делаю. Но. Я размеры контейнеров, которые будут вложены задаю размерами грид-сетки, а не %.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.body-container {
    display: grid;
    grid: 1fr 2rem / auto 1fr;
    grid-template-areas: 'aside main' 'aside footer';
}
.body-container aside {
        grid-area: aside;
}
.body-container main {
        width: 100%; 
        height: 100%;
        grid-area: main;
 }

Весь смысл в том, чтоб не было %, а все элементы строго в своих ячейках грида, как в примере выше я скинул, где таблица строго в трех столбцах второй строки, снизу "футер", и скрол только у таблицы, а не у всего растянувшегося элемента.

Добавлено через 32 минуты
Добился чего хотел, но выглядит как костыль какой-то.

CSS
1
2
3
4
5
6
.body-container {
    grid-area: body;
    display: grid;
    grid: calc(100vh - 4rem) 2rem / auto 1fr;
    grid-template-areas: 'aside main' 'aside footer';
}

где 4rem - это 2 хэдер + 2 футер

При этом относительная резиновость страницы сохраняется

@NTHing · 08.11.2020, 13:37

Вижу, что вы не поняли полностью...
1. В вашем референсе один общий контейнер с высотой 100vh на странице, поэтому нет никакого "общего" скролла. Внутри этого контейнера вы спокойно задаёте позиции для других элементов (с помощью grid, position: sticked, height, overflow, и/или чего-то другого), добиваясь нужных эффектов, например, фиксированной шапки у таблицы и прокрутки для остального содержимого.
2. В вашем же черновике другое количество элементов (блоков), с другой иерархией и позиционированием друг относительно друга. Приводить отличия и показывать конкретно что на что влияет смысла нет, поэтому я вам дал пример с процентами. Изучите его. И вникните. После этого сможете без всяких костылей сделать разметку (при наличии других знаний о позиционировании и проч.).
3. Чем проще и понятней разметка, тем лучше.

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@ipsorokin 296 / 120 / 33 Регистрация: 06.03.2016 Сообщений: 453
	07.11.2020, 11:14 [ТС]
	Ничего не поменялось. Полосы прокрутки по прежнему на всю страницу. Таблица растягивается вниз на сколько ей надо. Футер уезжает еще ниже. Справа появляется скрол и, как следствие, из-за этого добавляется еще внизу. Если выставить, например, max-height: 500px; то будет как надо, НО таблица должны быть до конца блока main. Миниатюры 0

@ipsorokin 296 / 120 / 33 Регистрация: 06.03.2016 Сообщений: 453
	07.11.2020, 11:17 [ТС]
	Извиняюсь, да, таблица должна так работать, но скрол только у нее должен быть, и за рамки родителя не должны вылезать. 0

@NTHing 1782 / 963 / 388 Регистрация: 26.11.2014 Сообщений: 1,966 Записей в блоге: 1
	08.11.2020, 13:37
	Вижу, что вы не поняли полностью... 1. В вашем референсе один общий контейнер с высотой `100vh` на странице, поэтому нет никакого "общего" скролла. Внутри этого контейнера вы спокойно задаёте позиции для других элементов (с помощью `grid`, `position: sticked`, `height`, `overflow`, и/или чего-то другого), добиваясь нужных эффектов, например, фиксированной шапки у таблицы и прокрутки для остального содержимого. 2. В вашем же черновике другое количество элементов (блоков), с другой иерархией и позиционированием друг относительно друга. Приводить отличия и показывать конкретно что на что влияет смысла нет, поэтому я вам дал пример с процентами. Изучите его. И вникните. После этого сможете без всяких костылей сделать разметку (при наличии других знаний о позиционировании и проч.). 3. Чем проще и понятней разметка, тем лучше. 0