Material Design datatable .table-bordered和.table-striped同时

问题描述：

我使用Material Design和Bootstrap设置了一个仪表板。现在我试图在所有单元格周围获得边框，并尝试为每个第二行着色。Material Design datatable .table-bordered和.table-striped同时

现在的问题是，两个类.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>

pease不仅会显示图像，而且还会显示您的代码的最小示例 – rebecca

看起来像Bootstrap对不对？ [表格镶边和表格镶边]（https://jsfiddle.net/mq20ktqf）没有问题，[限制边框自定义]（https://jsfiddle.net/mq20ktqf/1/）也适用，如果你限制它到'tbody'，那么你的问题究竟是什么？ – makadev

好吧，我用我的代码编辑我的帖子。在tbody中是同样的问题。 – Ck2513

答

我发现了一个可能性，来管理这个。

我注释掉的代码在CSS：

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

现在，它的工作原理。

Material Design datatable .table-bordered和.table-striped同时

相关推荐