Bootstrap表格边框去除水平线。

Question

我想移除Bootstrap表格的水平边框线，保留垂直线。

我尝试了许多解决方案并进行了大量研究，但仍然找不到解决方案。

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>Otto</td>
                        <td>@TwBootstrap</td>
                    </tr>
                    <tr>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

- Ace

Answer 1

在你的CSS文件中添加以下CSS规则（从td中删除边框并再次添加到右侧）：

只需在CSS文件中添加这些CSS规则即可（删除中的边框并将其重新添加到右侧）：

.table-bordered td {border: none !important; border-right: solid 1px #ccc !important;}

.table-bordered td {
  border: none !important;
  border-right: solid 1px #ccc !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>Otto</td>
            <td>@TwBootstrap</td>
          </tr>
          <tr>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

还有一个代码片段可以去掉thead的边框...

.table-bordered td,
.table-bordered th {
  border: none !important;
  border-right: solid 1px #ccc !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>Otto</td>
            <td>@TwBootstrap</td>
          </tr>
          <tr>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

- Rohit Sharma

---

这接近我想要做的事情，但是在“名字”和“姓氏”下面有一个底部水平线。是否可以删除该底部边框线？ - Ace

Answer 2

这个CSS应该可以解决问题：

.table {border: 1px solid black!important;} 
.table tr, .table td, .table th {border: 0!important;}
.table tr td:nth-child(2), 
.table tr th:nth-child(2) {border-left: 1px solid black!important;}

如果您希望支持超过2列的表格：

.table {border: 1px solid black!important;} 
.table tr, .table td, .table th {border: 0!important;}
.table tr td, 
.table tr th {border-left: 1px solid black!important;}
.table tr td:nth-child(1), 
.table tr th:nth-child(1) {border-left: 0!important;}

请参见：https://codepen.io/anon/pen/PKbJNV

- Mr. Hugo

Answer 3

如果你真的想使用table-bordered类，你也可以在CSS中这样做。

.table-bordered > tbody > tr > td,
    .table-bordered > thead > tr > td,
    .table-bordered {
        border-bottom:0;
        border-top: 0;
    }

- Moiz Shafqat Husain