使用css bootstrap时如何只为一列添加右边框？

Question

我正在尝试在我的项目中使用css bootstrap framework

我正在使用带有以下类的表table table-bordered table-striped

我想从除第一列之外的所有列中删除边框。

这是我在提琴手里的桌子https://jsfiddle.net/8yf0v3xt/16/

基本上在这个截图中，我只想去掉红色矩形边框中的垂直边框。

<table class="table table-bordered table-striped">
<thead>
  <tr><th></th><th></th>...</tr>
</thead>
<tbody>
<tr><th score="row"><th></td><td></td>...</tr>
...
</tbody>
</table>

已编辑

或者，如果我删除了表格边框类，我怎么才能只在第一列上添加一列？像这样的截图

我该怎么做？

Answer 1

您需要查看:first-child 伪选择器。 Link here

:first-child 选择器用于选择指定的选择器，仅当它是其父级的第一个子级时。

您可以选择所有td 元素并从它们中删除边框：

table tr td { border: none; }

然后为第一个元素添加独特的样式：

table tr td:first-child { border: default; } /* Or whatever styling you may wish..

:last-child 也可以这样做，它当然会选择与第一个元素相反的最后一个元素。

如果您需要再次更具体。您可以使用:nth-child(x)，其中 x 是您想要的元素的编号。

小提琴：https://jsfiddle.net/8yf0v3xt/18/

更新

小提琴：https://jsfiddle.net/8yf0v3xt/22/

我删除了 .table-bordered 类并添加了以下 CSS：

table { border: 1px solid #ddd; }
table.table tr, table.table tr th, table.table tr td { border: none; }
table.table tr th:first-child, table.table tr td:first-child { border: 1px solid #ddd; }

我已经使用了上面解释的伪选择器将样式添加到第一列。