无法去除表头和表身之间的灰线

Question

我正在 MVC 视图中生成一个表。代码很简单。

<div class="table-responsive">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>
                Company Name
            </th>
            <th>
                Contact Name
            </th>
            <th>
                Contact Title
            </th>
            <th>
                Address
            </th>
            <th>
                City
            </th>
            <th>
                Region
            </th>
            <th>
                Country
            </th>
            @*<th></th>*@
        </tr>
        </thead>
        <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.CompanyName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactTitle)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Address)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.City)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Region)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Country)
                </td>
            </tr>
        }
        </tbody>
    </table>
</div>

我正在使用引导程序，鉴于我编写了以下样式代码：

<style type="text/css">
    thead {
        background-color: #337aff;
        color: white;
        border-bottom-width: 0px;
    }

    tr:nth-child(even) {background-color: #f2f2f2}

    table {
        border: 2px solid #337aff;
        border-collapse: collapse;
        border-spacing: 0cm 0cm;
        font-family: verdana;
        border-bottom-width: 5px;
    }
    tbody {
        border-top-width: 0px;
    }
</style> 

问题是 thead 和 tbody 之间以及两个 tr 之间有一条非常小的灰线，虽然我做了 border-collapse: collapse and border-spacing: 0cm 0cm;

我不知道为什么会这样，也许是 bootstrap.css 文件。

任何帮助都将被接受。

谢谢 帕萨

Answer 1

“border-top”在“Bootstrap”本身的“tables.less”文件中设置为thead，tbody，tr和td，因此您可以使用删除微小的灰线"border: 0;" 在您的 CSS 中，如下所示：

.table>tbody>tr>td, .table>tbody>tr>th,
.table>tfoot>tr>td, .table>tfoot>tr>th,
.table>thead>tr>td, .table>thead>tr>th
{
  border: 0
}

完整代码：Remove tiny gray lines