Question

我正在为bootstrap中的表做一些基本样式，并将单元格边框变为深蓝色。没有什么花哨的和完全标准的桌子，但我不能为我的生活弄清楚如何设置桌头和桌子身体之间的边界。我已经尝试了一切让这条线看起来和其他一切一样。

enter image description here

任何人都可以告诉我如何在非灰色的单元格上创建带边框的引导表。我的表也很敏感，但似乎没什么区别

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

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

如何在桌头和身体之间设置bootstrap 3边框的样式

2 个答案: