Question

我正在使用bootstrap 2.3.2并且有一个包含2个标题的表（一次只显示1个标题）。这是my fiddle

<table class="table table-hover">
    <thead>
        <tr class="view_1"><th>Header 1</th></tr>
        <tr class="view_2"><th>Header 2</th></tr>
    </thead>
    <tbody>
        <tr class="view_1"><td>View 1</td></tr>
        <tr class="view_2"><td>View 2</td></tr>
    </tbody>

</table>

<button>Click Me</button>

初始视图显示隐藏了.view_1和.view_2。但是，标题上有一个轻微的顶部边框。隐藏.view_2并显示.view_1时，此边框将消失。如果显示.view_2，如何隐藏顶部边框？

谢谢！

Answer 1

设置该灰色边框的样式是.table th, .table td中的bootstrap-combined.min.css:192，因此您应该更改小提琴中的CSS：

.table th, .table td { border:1px solid #333;}

这将允许您更改边框的样式。 Here是修改后的CSS的小提琴。

如果您不想显示顶部边框，则需要添加：

.table th { border-top: none; }

Answer 2

你可以使用下面的css来摆脱顶部边框

CSS：

table thead tr th,table th{border-top:0px;}

首先包含bootstrap css然后包含你的自定义css，然后只用你的css覆盖默认的bootstrap css。

如何摆脱此表头的顶部边框？

2 个答案: