Question

我正在使用BootStrap，需要一种方法来只显示表格中的垂直线。

我尝试将border-left和border-right添加到表格和单独的td中，使用：1px solid #red;。但它不会添加边框颜色。

所以我正在寻找的是创建这些垂直线的简单方法

Answer 1

以下是执行此操作的CSS规则。

＆＃13;

table.table tbody tr td,
table.table thead tr th,
table.table thead {
  border-left: 1px solid red;
  border-right: 1px solid red;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h2>Bordered Table</h2>

  <p>The .table-bordered class adds borders to a table:</p>
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

Answer 2

您可以单独添加以下CSS。

table.table thead tr th{
  border-bottom: 1px solid red;
}

http://jsfiddle.net/nanduh/p63q4pm4/

或者你需要桌子的红色边框？

我需要一种方法，只使用bootstrap显示表中的垂直线。

2 个答案: