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

Question

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

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

我想要去掉所有列的边框，除了第一列。

这是我的表格在fiddler上的链接 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>

编辑

如果我移除table-bordered类，如何只在第一列添加一列？就像这个截图一样。

我应该怎么做？

- Junior

---

@Jay非常接近了！我想保留水平行，只想删除垂直行。 - Junior

@Jay 谢谢。这正是我要找的。你能否回答问题并解释一下你是如何做到的？我会接受你的答案。非常感谢。 - Junior

@Jay 谢谢。是否有可能消除 table-bordered 类的使用，而只向第一列添加边框？我还为了清晰度更新了我的问题。 - Junior

Answer 1

您需要了解 :first-child 伪类选择器。链接在这里

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

我已经按照上述所解释的伪选择器使用了样式，以便仅为第一列添加样式。

- Jay

---

谢谢。第二小提琴不正确。我需要消除外部边框，保留水平边框。 - Junior

谢谢。我觉得我把问题复杂化了。我移除了borderd类，然后在第一列上添加了这段代码 style="border-right: 1px solid #ddd;"，这也解决了问题。感谢您的帮助 :) - Junior

@MikeA 没问题。愉快编程 =) - Jay