CSS其他行 - 某些行隱藏

Question

我想樣式表使每一行是一個不同的顏色（奇/偶）。我有以下的CSS：

#woo tr:nth-child(even) td { 
    background-color: #f0f9ff; 
} 

#woo tr:nth-child(odd) td { 
    background-color: white; 
} 

不過，我的一些行可以被隱藏，我還是想行交替。我如何調整上述內容，以便交替顯示行，即使彼此相鄰的行不一定是奇數和偶數行？

Answer 1

如果您正在使用jQuery，您可以使用其功能之一，例如.filter()，只選擇那些可見的元素。但這裏的關鍵是一個CSS選擇器:visible。

例如（請參閱jsfiddle）：

jQuery('tr:visible:odd').css({'background-color': 'red'}); 
jQuery('tr:visible:even').css({'background-color': 'yellow'}); 

Answer 2

如果你使用jQuery，您可以採取以下辦法：

的JavaScript

$("tr:odd").addClass("odd"); 

CSS

.odd { 
    background: #ccc; 
} 

來源：http://css-tricks.com/snippets/jquery/jquery-zebra-stripe-a-table/

Answer 3

這是一個很難的問題，我只花了一段時間與CSS2和3個選擇打，我不知道我們還沒有。像這樣的東西應該是可能的，但不工作：

tr td {background-color:white;} 
tr td:not([style="display:none"]):nth-of-type(even) { 
    background-color:#f0f9ff; 
} 

<tr><td>1</td></tr> 
<tr><td style="display:none">2</td></tr> 
<tr><td>3</td></tr> 

似乎你不得不擁有jQuery的:visible擴展（不是本地CSS），但如果它的運行速度慢，絕對分頁行作爲@Ionut說。

Answer 4

由於「失蹤條紋現象」，如果奇數的行隱藏只發生，你也許可以僥倖逃脫添加一個不可見的填充行無論奇數行是隱藏的。

Row 1 
Row 2 
Row 3 (hidden) 
Padding (hidden) 
Row 4 
Row 5 

如果這實際上是一個很好的解決方案，高度依賴於您當前的代碼，例如，如何創建表格以及如何隱藏行。

但如果你的表是連續行的巨大和大塊被隱藏，這會表現得比一個Javascript/jQuery的解決方案要好得多。

Answer 5

我意識到這是超級晚了，但我今天遇到了同樣的問題，並使用nth-child公式想出了一個純CSS的解決方案。我不知道它是否適合你確切的情況，但如果每隔一行是隱藏的，但你仍然需要可見的行是交替的顏色，這個偉大的工程。該CSS選擇器看起來是這樣的：

tr:nth-child(4n - 1) { background-color: grey; }

Here is a fiddle顯示在行動了。

這使得每隔可見行灰色。有關這些公式如何工作的更多信息，this is a great tutorial。

Answer 6

我解決了這個問題，使用由兩個替代顏色組成的表的背景圖像。這使得不太完整的CSS解決方案，因爲它涉及到創建一個圖像，但它應該適用於具有數千個條目的表格。

下面的base64編碼中的背景圖像是1x50圖像，其中前25個像素爲一種顏色，下25個像素爲替代顏色。

table { 
 
    border-collapse: collapse; 
 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAIAAAASmSbdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQbATAssXhCIwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAYSURBVAjXY/j8/joTAwMDTfGXDzdpbQcATuQF2Ze0VigAAAAASUVORK5CYII=); 
 
} 
 
    
 
td { 
 
    padding: 2px 4px; 
 
    height: 21px; 
 
}

<table> 
 
    <tbody> 
 
     <tr style="display: table-row;"> 
 
      <td>ANIMAL!!</td> 
 
     </tr> 
 
     <tr style="display: table-row;"> 
 
      <td>Beaker</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Bunsen Honeydew, Ph.D.</td> 
 
     </tr> 
 
     <tr style="display: table-row;"> 
 
      <td>Camilla the Chicken</td> 
 
     </tr> 
 
     <tr style="display: table-row;"> 
 
      <td>Dr. Julius Strangepork</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Dr. Teeth</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Floyd Pepper</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Gonzo</td> 
 
     </tr> 
 
     <tr style="display: table-row;"> 
 
      <td>Janice</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Miss Piggy</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Rizzo</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Robin the Frog</td> 
 
     </tr> 
 
     <tr style="display: table-row;"> 
 
      <td>Sam the Eagle</td> 
 
     </tr> 
 
     <tr style="display: table-row;"> 
 
      <td>Statler</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>The Swedish Chef</td> 
 
     </tr> 
 
     <tr style="display: table-row;"> 
 
      <td>Waldorf</td> 
 
     </tr> 
 
     <tr style="display: none;"> 
 
      <td>Zoot</td> 
 
     </tr> 
 
    </tbody> 
 
</table>