有害的不均匀剥离表引导程序4

时间:2018-06-26 15:17:10

标签: html bootstrap-4

<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/。我必须删除表的其余部分以确保数据安全,但是除了表的前两行外,它没有其他问题。此外,最初我什至没有表头行,问题仍然存在。感谢任何可以帮助它的人。

1 个答案:

答案 0 :(得分:0)

bootstrap表使用第一行作为表头,因此它为粗体。您可以通过在元素中添加其他类来覆盖CSS文件中的this。

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

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

或者您可能在表中使用.table-striped类。