Question

我使用Material Design和bootstrap设置了一个仪表板。现在我试图在所有细胞周围找到边框，然后我尝试着每一秒的颜色。

现在的问题是.table-striped和.table-border这两个类不能按我的意愿一起工作。

我的想法是一个表格，其中所有单元格都有边框，每隔一行都有颜色。彩色线条中的实际值没有可见的边框。

这也不起作用：

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;
}

现在可行。

Material Design数据表.table-bordered和.table-striped同时

1 个答案: