仅显示边框行和表格外部Bootstrap

Question

我需要移除表格的垂直边框，除了外部边框，如下所示，使用Bootstrap。

我尝试了

 <table class="table no-footer worker-data table-bordered"....
.table td, .table th {
      border: none;
}

但是结果

- poppy

---

尝试使用.table th { border: none; }，保留.table td的样式。 - aaandri98

Answer 1

采用以下方法。

• 清除行的第一个子元素的右边框。
• 清除最后一个子元素的左边框。
• 清除除了行的第一个和最后一个子元素之外的所有其他子元素的右和左边框。

工作示例

.table td:first-child, .table th:first-child {
  border-right: none;
}
.table td:last-child, .table th:last-child {
  border-left: none;
}

.table td:not(:first-child):not(:last-child),
.table th:not(:first-child):not(:last-child) {
  border-right: none;
  border-left: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
  <table class="table no-footer worker-data table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>
</div>

- Nitheesh