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>

我正在使用bootstrap，在视图中我写了以下样式代码：

<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 ：折叠和 border-spacing ： 0cm 0cm ;

我不知道为什么会发生这种情况，也许对于bootstrap.css文件。

感谢接受任何帮助。

由于帕塔

Answer 1

＆＃34;的边框顶＆＃34;设置为thead，tbody，tr和td in＆＃34; tables.less＆＃34;文件位于＆＃34; Bootstrap＆＃34;本身，所以你可以使用＆＃34; border：0; ＆＃34;删除微小的灰线。在你的CSS中，像这样：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script> <div id="app"> <component-a>  <customComponent :is="componentPlaceHolder"></customComponent> </component-a> </div> <template id="component-a"> <div> <p>I am component A</p> <slot></slot> </div> </template> <template id="component-b"> <p>I am component B</p> </template>

完整代码：Remove tiny gray lines

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

1 个答案: