Html Question posted in
Some basic documentation can be found here.

Html – Apply CSS style depending of tbody height

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.

Tags:

2

Answers


  1. 0

    CSS container queries are a powerful tool, but as of now, they are mainly supported for elements that have an explicit block-level(like the tbody element) container.
    But you can achieve this by add a js script that check if the tbody element height is less than 400px to add a class name special-size.

    document.addEventListener("DOMContentLoaded", function() {
   var tbody = document.getElementById('my-tbody');
   if (tbody.offsetHeight < 400) {
      tbody.classList.add('special-size');
   }
});

    This is an example:

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search