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

Question

我正在 bootstrap 中对表格进行一些基本样式设置，并将单元格边框变为深蓝色。没什么特别的，而且是一张完全标准的 table ，但我终其一生都无法弄清楚如何设计 table 头和 table 身之间的边框。我已尽一切努力使这条线看起来与其他一切一样。

谁能告诉我如何创建一个在非灰色单元格上带有边框的 Bootstrap 表。我的 table 也有响应，但这似乎没什么区别

.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

您应该像这样使用 Bootstrap 使用的选择器: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; }