html - 如何在表头和表体之间设置 bootstrap 3 边框样式

Question

我正在引导程序中对表格进行一些基本样式设置，并将单元格边框变为深蓝色。没有什么花哨的和完全标准的桌子，但我一生都无法弄清楚如何设计桌头和桌身之间的边框。我已经尽一切努力让这条线看起来和其他所有东西一样。

谁能告诉我如何创建一个带有非灰色单元格边框的引导表。我的桌子也反应灵敏，但这似乎没什么区别

.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>

Answer 1

您应该使用引导程序使用的选择器，如下所示：http: //jsfiddle.net/4tdS2

你的 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; }

Answer 2

我试过这个解决方案。它确实奏效了。但在我的桌子上，我有复选框。因此，如果我添加包括它在内的那些<thead>

.table thead > tr > th {display:none;}

标记并单击复选框，它将选中以下所有复选框。给人一种全选的感觉。
所以我添加了

.table thead > tr > th {display:none;}

这样该表格标题将根本不可见。