總是顯示錶頭，而所有行都顯示：隱藏;

Question

我有一個動態表，並根據用戶事件，表的行數改變。我的tr不是.selected類別的設置爲display:none; - 並且很可能沒有表格行具有該類別。問題是表標題消失，當我設置display:none時除了原始的第一行有類selected。換句話說，只有當選擇第一行時纔會出現標題。這是有道理的，我想，但有沒有解決這個問題的方法display:none;？我希望表頭始終可見，無論哪些行被隱藏。

tr:not(.selected) { 
    display:none; 
} 

我試着添加諸如not(:first-child)之類的東西，但都沒有工作。我是否正在使用這種方法在正確的軌道上？我想動態地添加和刪除行會涉及太多迭代或減慢速度。

Answer 1

首先，你不需要not後結腸，因此將其刪除：

tr:not(.selected) { 
    display: none; 
} 

至於隱藏唯一的數據行（而不是頭行）不具備.selected類中，有是完成這一點的幾種方法。我建議你是分裂使用<thead>和<tbody>你的表：

<table> 
    <thead> 
    <tr> 
     <th> 
     Heading 1 
     </th> 
     <th> 
     Heading 2 
     </th> 
     <th> 
     .... 
     </th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr> 
     <!-- your data here --> 
    </tr> 
    </tbody> 
</table> 

然後你就可以使用下面的CSS，以確保只有在表中的身體行 - 而不是它的頭 - 消失無.selected類：

tbody tr:not(.selected) { 
    display: none; 
}