Как растянуть содержимое ячейки td на всю ширину и высоту ячейки?

Question

[DZHAMBUALT]

Добрый день! Есть таблица сделанная с семантическими тегами. Мне нужно растянуть содержимое ячейки в tbody на всю ширину и высоту этой ячейки без каких либо position absolute и прочего, из за того что содержимое ячейки может быть динамическим. Я пробовал применить для td display flex но это ломает таблицу. Вот песочница:

Comments

[Ankhena]

Я пробовал применить для td display flex но это ломает таблицу

Используйте grid и subgrid.

[Сергей delphinpro]

проблему обозначьте. в вашей песочнице все выглядит нормально.

[DZHAMBUALT]

Сергей delphinpro,

Как растянуть содержимое ячейки td на всю ширину и высоту ячейки?

[DZHAMBUALT]

Ankhena, Не понял как это применить

[Сергей delphinpro]

DZHAMBUALT, вы в песочнице покажите проблему. пока что там все нормально.

[Сергей delphinpro]

DZHAMBUALT,

Не понял как это применить

Верстаете семанткой - table
потом переопределяете стили для table, tr, td на гриды

subgrid, наверное и не нужен.

table {
  display: grid;
  grid-template-columns: 4;
}

tr {
  display: contents;
}

td {
  display: flex;
}

td>* {
  width: 100%;
}

[DZHAMBUALT]

Сергей delphinpro, Вы наверное не смотрели с помощью девтулсов а то я не понимаю как вы к этому пришли

[Сергей delphinpro]

DZHAMBUALT, пришли к чему? Почему вы выдаете обрывки информации? =))

[DZHAMBUALT]

Сергей delphinpro, Ну к тому что все нормально и мой вопрос не имеет значения

[Ivan Ustûžanin]

если контент динамический, то зачем его растягивать? он сам растянет таблицу
да и если с шириной ещё что-то можно придумать (тот же width), то с высотой ничего не поделаешь, если не задавать её фиксированную непроцентами
замена семантической таблицы гридами может помочь, т.к. грид-элемент по умолчанию высотой в грид-строку

[Ankhena]

DZHAMBUALT,

Не понял как это применить

Вот как Сергей расписал, примерно так и применить. Тут могут быть незначительные вариации.

Ещё display contents для tbody, thead.
Либо вернуться к subgrid.

И по дороге помнить, что display contents ломает семантику.

Answer 1

[VoidVolker]

https://htmlbook.ru/css/width

Comments

[DZHAMBUALT]

Что насчет высоты