使用css和html的Zebra表？

Question

我需要做的這個表中的CSS：

我需要幫助，請，我不知道該怎麼做。

Answer 1

您可以使用:nth-of-type(odd)來做到這一點。

tr:nth-of-type(odd) {background-color: green;} 

Answer 2

將數據替換爲高興，理想情況下，您的一些代碼會更好。給類highlight突出顯示tr s。注意這個例子包括bootstrap 3分鐘的CSS。

.highlight { 
 
    background-color: lightgreen; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <table class="table table-bordered"> 
 
    <thead> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Email</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="highlight"> 
 
     <td>John</td> 
 
     <td>Doe</td> 
 
     <td>john@example.com</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Mary</td> 
 
     <td>Moe</td> 
 
     <td>mary@example.com</td> 
 
     </tr> 
 
     <tr class="highlight"> 
 
     <td>July</td> 
 
     <td>Dooley</td> 
 
     <td>july@example.com</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>