Html 如何在表头和主体之间设置引导程序 3 边框的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19306966/
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
How to style bootstrap 3 border between table head and body
提问by EnduroDave
I am doing some basic styling of a table in bootstrap and turn the cell borders dark blue. Nothing fancy and a completely standard table but I cant for the life of me work out how to style the border between the table head and table body. I have tried everything to get this line to look the same as everything else.
我正在引导程序中对表格进行一些基本样式，并将单元格边框变成深蓝色。没有什么特别的和完全标准的桌子，但我一生都无法弄清楚如何设计桌子头和桌子主体之间的边界。我已经尽一切努力让这条线看起来和其他东西一样。
Can anyone tell me how to create a bootstrap table with borders on the cells that are not gray. My table is also responsive but that seems to make little difference
谁能告诉我如何创建一个带有非灰色单元格边框的引导表。我的桌子也有反应，但这似乎没什么区别
.table td, .table th {
border: 1px solid #2980B9;
}
.table{
border: 1px solid #2980B9;
}
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>1</th>
<th>Table cell</th>
<th>Table cell</th>
<th>Table cell</th>
<th>Table cell</th>
<th>Table cell</th>
<th>Table cell</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
回答by Patrick Coffey
You should use the selectors that bootstrap uses like so: http://jsfiddle.net/4tdS2
您应该使用引导程序使用的选择器，如下所示：http: //jsfiddle.net/4tdS2
Your css could look something like this:
您的 css 可能如下所示：
.table { border: 1px solid #2980B9; }
.table thead > tr > th { border-bottom: none; }
.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { border: 1px solid #2980B9; }
回答by Ashish Phadale
I tried this solution. It did work. But in my table I had checkboxes. So if I add those including it in <thead>
我试过这个解决方案。它确实有效。但是在我的表中我有复选框。所以如果我添加那些包含它的<thead>
.table thead > tr > th {display:none;}tag and click on checkbox, it would select all the below checkboxes. Giving it a feel of select all.
So instead I added
标记并单击复选框，它将选择以下所有复选框。给人一种全选的感觉。
所以我加了
.table thead > tr > th {display:none;}
so that that table heading will not be visible at all.
以便该表格标题根本不可见。
