不需要的不均匀条纹表 Bootstrap 4答案

【问题标题】：Unwanted Uneven Stripped Table Bootstrap 4不需要的不均匀条纹表 Bootstrap 4
【发布时间】：2018-06-28 02:00:00
【问题描述】：

<html>

<head>
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Titatoggle -->
    <link href="titatoggle-dist.css" rel="stylesheet">


</head>

<body>
    <table class="table table-striped table-bordered" style="width:70%">
        <thead>
            <tr>
                <th>Fields</th>
                <th>Information</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- Customer Info -->
                <td width="40%">Name</td>
                <td width="60%"> <input type="text" name="name" class="form-control" style="display:table-cell; width:100%" placeholder="Enter full name"></td>
            </tr>
            <tr>


            </tr>
            <tr>
                <!-- NRO POC -->
                <td width="40%">Address</td>
                <td width="60%"> <input type="text" name="address" class="form-control" style="display:table-cell; width:100%" placeholder="Enter address"></td>

            </tr>
            <tr>
                <!-- Customer organization -->
                <td width="40%">Company</td>
                <td width="60%">
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="organization" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Customer Organiztion
                                          </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

                        </div>
                    </div>
                </td>

            </tr>

        </tbody>
    </table>
</body>

</html>

我不确定是什么导致我的引导表（表条纹）的前两行看起来很暗

Faulty Table Image

我不知道如何添加我的 CSS 文件，但我使用了带有此链接的引导模板：https://startbootstrap.com/template-overviews/sb-admin/。我不得不删除表的其余部分以确保数据安全，但除了表的前两行之外它没有这个问题。此外，最初我什至没有表格标题行，问题仍然存在。非常感谢任何可以帮助它的人。

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

引导表使用第一行作为表头，因此它是粗体的。您可以通过向元素添加不同的类来覆盖 CSS 文件中的 this。

tr:first-child td {
    background-color: #your_color;
}

或

tr:nth-child td {
    background-color: #your_color;
}

或者也许您正在使用.table-striped 类到您的表。

【讨论】：

如果您的问题解决了，别忘了接受解决方案，以便帮助他人。