html - Material 设计数据表.table-bordered和.table-striped同时

我使用Material Design设计了一个仪表板。现在，我尝试在所有单元格周围设置边框，并尝试为第二行上色。

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

最佳答案

我发现可以解决这个问题。

我在CSS中将以下代码注释掉：

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

现在可以了。