Question

我正在使用自定义css和bootstrap用于外边框。但除非我将其大小设为2像素，否则顶部边框不可见。

我该如何解决这个问题？

HTML

<table class="table table-condensed table-hover border"> 
<tr><td>#</td><td><strong>name</strong></td></tr>
<tr><td>1.</td><td>one</td></tr>
<tr><td>2.</td><td>two</td></tr>
<tr><td>3.</td><td>three</td></tr>
<tr><td>4.</td><td>four</td></tr>
</table>

CSS

@import url("http://netdna.bootstrapcdn.com/bootswatch/3.0.3/cerulean/bootstrap.min.css");
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css");

.border{
background-color:#fff;
color:#000;
padding:10px;
border:1px solid #4C7ED1;
}

http://jsfiddle.net/Xy6a6/

我想要1px＃4C7ED1的外表边框除顶部外，它在各方面都可见，我该如何解决？

由于

Answer 1

A JSFiddle with the fix

深入研究DOM，您会注意到<td>的边框顶部属性为1px solid #ddd。您需要做的就是在第一个<td>中选择<tr>，然后应用您想要的边框。

最终，这意味着将其添加到您的CSS中：

.border tr:first-child td {
    border-top: 1px solid #4C7ED1;
}

Answer 2

使用border:1px double #4C7ED1;代替border:1px solid #4C7ED1;

这是 DEMO

Answer 3

您应该将标记内的第一个表格更改为thead，如下所示：

<table class="table table-condensed table-hover border"> 
<thead><td>#</td><td><strong>name</strong></td></thead>
<tr><td>1.</td><td>one</td></tr>
<tr><td>2.</td><td>two</td></tr>
<tr><td>3.</td><td>three</td></tr>
<tr><td>4.</td><td>four</td></tr>
</table>

然后你将拥有表格的顶部边框，现在你可以修改此元素的css规则

http://jsfiddle.net/Xy6a6/3/

Answer 4

在引导程序4中，出于一致性考虑，类table-condensed重命名为table-sm。参考：[https://getbootstrap.com/docs/4.0/migration/][1]

Bootstrap表 - 浓缩表 - 悬停，Top Border未显示

4 个答案: