Materialデザインデータテーブル.table-borderedと.table-striped同時に、

Question

マテリアルデザインとブートストラップでダッシュボードをセットアップしました。今私はすべてのセルの周りに境界線を取得しようとし、私は各2行目を着色しようとしました。

問題は、.table-stripedと.table-borderedの2つのクラスが、私が望むように一緒に動作しないことです。

私のアイデアは、すべてのセルに境界線があり、2行おきに色付けされたテーブルでした。着色された線の中に実際に見える罫線はありません。

これは、あまりにも動作しません：

tr:nth-child(even) {background-color: #e6ffe6;} 
tr:nth-child(odd) {background-color: #FFF; } 

は私の問題のための任意の解決策はありますか？私はこれを管理するための可能性を発見した

<div class="content"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="card"> 
          <div class="card-header" data-background-color="green"> 
           <h4 class="title">1. Personal</h4> 
           <p class="category">1.1 Arbeitszeit</p> 
          </div> 
          <div class="card-content table-responsive table-maxheight" style="overflow:scroll;"> 
           <table class="table table-hover table-mc-green"> 
            <thead class="text-primary"> 
             <th class="thbackground">ID</th> 
             <th class="thbackground">Gleitzeitrahmen</th> 
             <th class="thwidth thbackground">Abweichungen</th> 
             <th class="thwidth thbackground">Mehrarbeitervolumen</th> 
             <th class="thwidth thbackground">Mehrarbeit</th> 
             <th class="thwidth thbackground">Ausgleich</th> 
             <th class="thwidth thbackground">Mehrarbeit</th> 
             <th class="thwidth thbackground">Personalma&szlig;nahmen</th> 
             <th class="thwidth thbackground">Sind &Uuml;berstunden abzusehen?</th> 
             <th class="thbackground">Kl&auml;rungsbedarfe</th> 
             <th class="thwidth thbackground">Kl&auml;rungsbedarfe Beschreibung</th> 
            </thead> 
            <tbody class="table-bordered table-striped"> 
             <?php 
             if(mysqli_num_rows($result_table_main) > 0){ 
              while ($row = mysqli_fetch_assoc($result_table_main)) { 
              echo '<tr>'; 
              echo '<td>'. $row['id'] .'</td>'; 
              echo '<td>'. $row['name_Gleitzeitrahmen'] .'</td>'; 
              echo '<td>'. $row['name_Abweichungen'] .'</td>'; 
              echo '<td>'. $row['name_Mehrarbeitervolumen'] .'</td>'; 
              echo '<td>'. $row['name_Mehrarbeit1'] .'</td>'; 
              echo '<td>'. $row['name_Ausgleich'] .'</td>'; 
              echo '<td>'. $row['name_Mehrarbeit2'] .'</td>'; 
              echo '<td>'. $row['name_Personalmassnahmen'] .'</td>'; 
              echo '<td>'. $row['name_Ueberstunden_abzusehen'] .'</td>'; 
              echo '<td>'. $row['name_Klaerungsbedarfe1'] .'</td>'; 
              echo '<td>'. $row['name_Klaerungsbedarfe2'] .'</td>'; 
              echo '</tr>'; 
              } 
             } 
             ?> 
            </tbody> 
           </table> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

Answer 1

：

EDIT：

私のコードここ

は私の実際のサイトです。

私はCSSでこのコードをコメントアウト：

.table>tbody>tr { 
position: relative; 
} 

は、今では動作します。