I have simple example that applies style when div height is less than 400px.
<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>
How can I make the same but with tbody height?
<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>
Maybe I'm doing something wrong or CSS container queries works only with div?
I need to apply style to table depending of tbody height.
Of course I can get tbody height with JavaScript and too apply style, but think that CSS and container queries is more clear.
Internal table boxes cannot have size containment applied, and are explicitly excluded in the CSS Containment Level 2 Specification.
... giving an element size containment has no effect if any of the following are true:
- if the element does not generate a principal box (as is the case with display: contents or display: none)
- if its inner display type is table
- if its principal box is an internal table box
- if its principal box is an internal ruby box or a non-atomic inline-level box
Furthermore the specification provides an explanatory note:
Internal table boxes, which do not include table captions, are excluded, because the table layout algorithm does not allow boxes to become smaller than their inflow content. Sizing a table cell as if it was empty and then laying out its content inside without changing the size is effectively an undefined operation. Manually setting the width or height properties to 0 cannot make it smaller than its content. This concern does not apply to table captions, which are perfectly capable of having a fixed size that is independent of their content.