我有一个警报表,其中 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
最佳答案
我会使用删除/添加消息的方法将类设置为 #bottom
以指示不应显示边框。
例如:
#bottom.no-border {
border-top: 5px solid blue;
}
另一种选择是在第一个表格行上绘制边框。这样它只会在实际有表格行时显示。
#alerts tr:first-child {
border-top: 5px solid blue;
}
关于html - 当 div 为 "empty"时隐藏底部的 div(有空 child ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17429467/