Из спеки
Contexts in which this element can be used:
As a child of a table element, after any caption, colgroup, and thead elements, but only if there are no tr elements that are children of the table element. https://html.spec.whatwg.org/multipage/tables.html...
Справедливости ради, раньше tfoot действительно нужно было писать до tbody
Гуглить "схлопывание и выпадение вертикальных margin".
Потом "разница между padding и margin". Потому что это вообще не margin. Но схлопывание как раз таки должно научить отличать когда что использовать.
Serezha, Пример clip-path? Да вот, пожалуйста https://bennettfeely.com/clippy/ и дальше в гугл разбираться с увиденным. Нужная вам форма находится в макете фигмы. Чем-то же её дизайнер обрезал.
luxurypluxury,
- изначально два столбца (или на js)
- не гриды
- гриды, но ограничение по высоте и заголовков и выпадашек. Выпадашка = заголовок + gap. Ограничение высоты заголовков у вас и так должно быть, иначе и без выпадашек нарушатся желалки.
- флексы колонками + фикс высота контейнера (на js) + js для псевдо, если активный элемент во втором столбце
- js (много разных вариантов для вычислений)
luxurypluxury, к сожалению, эта информация мало чем отличается от того, что в вопросе.
"Не должна" - отлично. А должно-то что?
Давайте подробнее варианты:
1. Можно открывать поверх следующих элементов: фикс высота + абсолюты или просто выпадение за счет высоты. Вероятно, не получится без JS, если начальная высота неизвестна.
2. Со сдвигом нижних элементов.
2.1. Только своего столбца: потребуется JS для вычисления количества строк, которые должен занять кликнутый элемент. (Теоретически, можно сразу каждому элементу задать большое количество строк, но тогда умрет gap)
2.2. Вообще сдвиг всех элементов и перераспределение по столбцам. Кликнули по элементу в первом столбце - остальные сдвинулись в обоих столбцах и перераспределились по столбцам.
=> Использовать css columns. JS не нужен, но распределение по столбцам по усмотрению браузера, а оно не всегда выходит красивым.
2.3. Можно открывать кликнутый элемент на всю ширину родителя. Соседа при этом тоже можно/нужно растянуть.
2.4. Ваш вариант.
Можно использовать скрипты типа masonry сами по себе или в сочетании с гридами.
Описать на своём родном языке, а что должно происходить вместо этого. Дело в том, что вы и нам не рассказали.
Потом перевести всё это на CSS.
Вероятно, от гридов при этом придется избавиться или добавить js для расчета grid-row
Serezha, нужно прекратить писать в чужом ответе.
Подумайте чьи именно это должны быть псевдоэлементы, чтобы получилось как на скрине.
Отредактируйте вопрос и прикрепите к нему песочницу на codepen.io с тем, что у вас не получилось.
Serezha, вы можете сделать градиент из белого в прозрачный?
Ну или тупо скопировать код из моих примеров, поменяв цвет на свой и повернув уголок, потому что у меня как раз таки в прозрачный.
Contexts in which this element can be used:
As a child of a table element, after any caption, colgroup, and thead elements, but only if there are no tr elements that are children of the table element.
https://html.spec.whatwg.org/multipage/tables.html...
Справедливости ради, раньше tfoot действительно нужно было писать до tbody