如何在使用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>

EDITED

或者，如果我删除带有表格的类，我怎么才能在第一列上添加一列？像这个截图的东西

我该怎么做？

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

我使用了如上所述的伪选择器来为第一列添加样式。