css 相关问题

我有一个简单的例子，当div高度小于400px时应用样式。 .card-container { 容器类型：尺寸； ...</desc> <question vote="0"> <p>我有一个简单的例子，当 div 高度小于 400px 时应用样式。</p> <pre><code><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> </code></pre> <p>我怎样才能做同样的事情，但身体高度不同？</p> <pre><code><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> </code></pre> <p>也许我做错了什么或者 CSS 容器查询仅适用于 div？</p> <p>我需要根据身体高度将样式应用于桌子。</p> <p>当然我可以用JavaScript获取body高度并应用样式，但认为CSS和容器查询更清晰。</p> </question> <answer tick="false" vote="0"> <p>CSS 容器查询是一个强大的工具，但到目前为止，它们主要支持具有显式块级容器的元素（如 <pre><code>tbody</code></pre> 元素）。但是你可以通过添加一个js脚本来检查<pre><code>tbody</code></pre>元素高度是否小于400px来添加类名<pre><code>special-size</code></pre>来实现这一点。</p> <pre><code>document.addEventListener("DOMContentLoaded", function() { var tbody = document.getElementById('my-tbody'); if (tbody.offsetHeight < 400) { tbody.classList.add('special-size'); } }); </code></pre> <p>这是一个例子：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener("DOMContentLoaded", function() { var tbody = document.getElementById('my-tbody'); if (tbody.offsetHeight < 400) { tbody.classList.add('special-size'); } });</code></pre> <pre><code> .table-container { border-collapse: collapse; width: 100%; } .table-container, th, td { border: 1px solid black; } .special-size { background: green; }</code></pre> <pre><code><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></code></pre> </div> </div> <p></p> </answer> </body></html>

html css html-table styles

回答 0 投票 0

Firefox 浏览器中的动画

我做了一个带有渐变动画边框的按钮，就是旋转。它在 Safari 和 Chrome 中运行良好，但在 Firefox 中缺乏流畅的关键帧。我尝试添加 -moz- 但它没有...

css firefox

回答 1 投票 0

css 相关问题

最新问题