html - 当 div 为 "empty"时隐藏底部的 div(有空 child )

Question

我有一个警报表，其中 tr 元素是使用 JS 动态添加/删除的。问题是它有一个 border-top 将它与上面的内容分开，当表格为空时我想隐藏这些内容。我试过 :empty 和 display:none 但底部的 div 有 child ，所以这不起作用。

HTML

<div id="content">
    <div id="top"></div>
    <div id="bottom">
        <table id="alerts">
            <tbody></tbody>
        </table>
    </div>
</div>

CSS

#top {
    position: absolute;
    background: rgba(255, 255, 0, 0.3);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#bottom {
    position: absolute;
    background: rgba(255, 0, 0, 0.3);
    /*padding: 5px;*/
    border-top: 5px solid blue;
    max-height: 30%;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

table#alerts {
    border-collapse: collapse;
}

有什么非 JavaScript 的想法吗？

Fiddle

Answer 1

我会使用删除/添加消息的方法将类设置为 #bottom 以指示不应显示边框。

例如:

#bottom.no-border {
    border-top: 5px solid blue;
}

另一种选择是在第一个表格行上绘制边框。这样它只会在实际有表格行时显示。

#alerts tr:first-child {
    border-top: 5px solid blue;
}