twitter-bootstrap Bootstrap table table-condensed table-hover，顶部边框不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21952527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap table table-condensed table-hover, Top Border not showing
提问by AMB
I am using custom css with bootstrap for outer border. but the top border isnt visible unless i make its size to 2 px.
我正在使用带有引导程序的自定义 css 作为外边框。但顶部边框不可见，除非我将其大小设置为 2 像素。
how can i solve this?
我该如何解决这个问题？
HTML
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
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;
}
I would like a Outer Table Border of 1px #4C7ED1 Its visible on all sides except top , how can i fix it ?
我想要一个 1px 的外部表格边框 #4C7ED1 除了顶部，它在所有侧面都可见，我该如何修复它？
Thanks
谢谢
回答by knrz
Delving into the DOM, you'll notice that it's the <td>that have a border-top property of 1px solid #ddd. All you needed to do was select the <td>s within the first <tr>and then apply the border you wanted.
深入研究 DOM，您会注意到它的<td>边界顶部属性为1px solid #ddd。您需要做的就是<td>在第一个中选择s <tr>，然后应用您想要的边框。
Ultimately, it meant adding this to your CSS:
最终，这意味着将其添加到您的 CSS 中：
.border tr:first-child td {
border-top: 1px solid #4C7ED1;
}
回答by Sam1604
回答by aslawin
you should change your first table inside tags to theadlike this:
您应该将标签内的第一个表格更改为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>
then you'll have top border of table and you now you can modify css rule for this element
那么您将拥有表格的顶部边框，现在您可以修改此元素的 css 规则
回答by Akash Mulik
In bootstrap 4, class table-condensedrenamed to table-smfor consistency.
Reference: [https://getbootstrap.com/docs/4.0/migration/][1]
在引导程序 4 中，为了一致性，类table-condensed重命名table-sm为 。参考：[ https://getbootstrap.com/docs/4.0/migration/][1]
