シマウマ表CSSとHTMLを使用してですか？

Question

私はCSSでこのテーブルを実行する必要があります。

私は助けを必要としてください、私はどのように行うのか分かりません。

Answer 1

これを行うには:nth-of-type(odd)を使用できます。

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

Answer 2

データを気に入ったものに置き換えてください。理想的には、あなたのコードのほうが良いでしょう。クラスhighlightにtrをハイライト表示します。この例には、ブートストラップ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>