我有一個警報表，其中tr元素是使用JS動態添加/刪除的。問題在於它有一個border-top，它將上面的內容與表格爲空時我想隱藏的內容分開。我試過:empty與display:none但底部的div有孩子，所以不起作用。當它是「空的」時，在底部隱藏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

來源

2013-07-02 Jonathan

爲什麼非JavaScript時，你已經使用它來刪除元素？ – smerny

如果可以避免的話，我寧願不使用JS進行造型。 – Jonathan

即使你只是在談論隱藏一個元素？ [這個jsfiddle]（http://jsfiddle.net/hB4SM/2/）只是爲了展示一個jQuery解決方案。點擊行使它們消失。 – smerny

只是出於好奇，你爲什麼要反對使用JavaScript來呢？這正是JavaScript爲什麼如此有用的原因，它可以讓你非常簡單地完成這樣的事情。你可以運行一個測試，當頁面正在加載，看看錶是否爲空，如果是這樣，設置border-top: none;

來源

2013-07-02 15:25:24 taylorc93

我要麼使用刪除/添加消息的方法也設置一個類爲#bottom，以表明沒有應顯示邊框。

例如：

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

另一種辦法是借鑑第一個錶行的邊界。這種方式僅在實際存在表格行時顯示。

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

來源

2013-07-02 15:26:17 feeela

感謝：'table {width：100％;} tbody {border-top：5px solid blue;} tbody：empty {border：none;}'讓我幾乎到了那裏，但滾動條仍然與'＃bottom'重疊 – Jonathan

當它是「空的」時，在底部隱藏div（空子女）

HTML

CSS

Fiddle

回答

相關問題