当它为“空”（有空子）时隐藏底部的div

Question

我有一个警报表，其中使用JS动态添加/删除tr个元素。 问题是它有一个border-top，它将它与上面的内容分开，我想在表空时隐藏它。我已经使用:empty尝试了display:none，但是底部div有孩子，因此无法正常工作。

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;
}

Answer 2

出于好奇，你为什么反对使用JavaScript呢？这正是JavaScript如此有用的原因，它允许您非常简单地执行此类操作。您可以在加载页面时运行测试以查看表是否为空，如果是，请设置border-top: none;