Применить стиль CSS в зависимости от высоты тела
У меня есть простой пример, который применяет стиль, когда высота div меньше 400 пикселей.
<html>
<head>
<style>
.card-container {
container-type: size;
container-name: sidebar;
}
.card-container {
background: #ffe4e8;
width: 200px;
height: 100px;
}
@container sidebar (max-height: 400px) {
.card-container div:first-child {
background: green;
}
}
</style>
</head>
<body>
<div class = "card-container">
<div>
1
</div>
</div>
</body>
</html>
Как сделать то же самое, но с ростом?
<html>
<head>
<style>
.table-container tbody {
container-type: size;
container-name: sidebar;
}
@container sidebar (max-height: 400px) {
.table-container tbody {
background: green;
}
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table class = "table-container">
<thead>
<tr>
<th>123456789</th>
</tr>
</thead>
<tbody>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
</tbody>
</table>
</body>
</html>
Может быть, я делаю что-то не так или запросы CSS-контейнера работают только с div?
Мне нужно применить стиль к таблице в зависимости от высоты тела.
Конечно, я могу получить высоту тела с помощью JavaScript и применить стиль, но думаю, что запросы CSS и контейнеров более понятны.
Ответы 2
Запросы CSS-контейнера — мощный инструмент, но на данный момент они в основном поддерживаются для элементов, которые имеют явный контейнер уровня блока (например, элемент tbody).
Но вы можете добиться этого, добавив js-скрипт, который проверяет, меньше ли высота элемента tbody 400 пикселей, чтобы добавить имя класса special-size.
document.addEventListener("DOMContentLoaded", function() {
var tbody = document.getElementById('my-tbody');
if (tbody.offsetHeight < 400) {
tbody.classList.add('special-size');
}
});
Это пример:
document.addEventListener("DOMContentLoaded", function() {
var tbody = document.getElementById('my-tbody');
if (tbody.offsetHeight < 400) {
tbody.classList.add('special-size');
}
}); .table-container {
border-collapse: collapse;
width: 100%;
}
.table-container, th, td {
border: 1px solid black;
}
.special-size {
background: green;
}<html>
<head>
</head>
<body>
<table class = "table-container">
<thead>
<tr>
<th>123456789</th>
</tr>
</thead>
<tbody id = "my-tbody">
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
<tr><td>kkk</td></tr>
</tbody>
</table>
</body>
</html>К внутренним полям таблицы не может быть применено ограничение размера, и они явно исключены из Спецификации уровня 2 ограничения CSS.
... ограничение размера элемента не имеет никакого эффекта, если выполняется любое из следующих условий:
- если элемент не создает основной блок (как в случае с display:contents или display:none)
- если его внутренний тип отображения — таблица
- если его основной блок является внутренним табличным блоком
- если его основной блок является внутренним рубиновым блоком или неатомарным блоком строкового уровня
Кроме того, в спецификации содержится пояснительная записка:
Внутренние поля таблицы, которые не включают заголовки таблиц, исключаются, поскольку алгоритм компоновки таблицы не позволяет полям становиться меньше, чем их входное содержимое. Изменение размера ячейки таблицы так, как если бы она была пустой, а затем размещение ее содержимого внутри без изменения размера фактически является неопределенной операцией. Установка вручную для свойств ширины или высоты значения 0 не может сделать его меньше, чем его содержимое. Эта проблема не относится к заголовкам таблиц, которые вполне могут иметь фиксированный размер, независимый от их содержимого.
Но
table-containerявляется родителемtbody, поэтому запросы к контейнеру на самом деле неприменимы... верно?