1

我有一个警报表，其中tr使用 JS 动态添加/删除元素。问题是它有一个border-top将它与我想在表格为空时隐藏的上述内容分开。我已经尝试过:emptywithdisplay: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 的想法？

小提琴

4

2 回答 2

1

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

例如：

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

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

#alerts tr:first-child {
    border-top: 5px solid blue;
}
于 2013-07-02T15:26:17.283 回答
0

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

于 2013-07-02T15:25:24.763 回答