머티리얼 디자인 데이터 테이블. 테이블 보더와 테이블 스 티어 스트라이프 동시에 작성

Question

머티리얼 디자인과 부트 스트랩으로 대시 보드를 설정했습니다. 이제 모든 셀 주위에 테두리를 만들려고 시도하고 각 두 번째 행을 색칠하려고했습니다.

.table-striped와 .table-bordered의 두 클래스가 내가 원하는만큼 함께 작동하지 않아서 문제가되었습니다.

내 아이디어는 모든 셀에 테두리가 있고 두 번째 행마다 색이있는 테이블이었습니다. 색깔이있는 선의 실제는 보이지 않는 경계선입니다.

이 너무 작동하지 않습니다 내 문제에 대한 해결책이

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

내가이 관리 할 수있는 가능성을 발견했다.

나는 CSS에서이 코드를 주석 :

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

는 이제 작동합니다.