Bootstrap表格边框去除右侧和左侧边框。

Question

我正在使用表格，代码如下：

<table class="table table-hover table-bordered">

Cell 1	Cell 2
Cell 3	Cell 4

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

然而，这并没有去除左边或右边的边框，但它确实应用了一个红色的底部边框，所以我知道它至少正在处理这个CSS，但是对于去除边框没有效果。

有什么想法吗？

- Snowman

---

你尝试过进一步细分吗？比如border-bottom-style、border-bottom-color和border-bottom-width？然后不加border-right和border-left？ - BuddhistBeast

@BuddhistBeast 没有区别。 - Snowman

Answer 1

将这个代码：<table class="table table-hover table-bordered">改为：<table class="table table-hover">

然后加入这段CSS代码：

.table {
  border: 1px solid #dddddd;
}

不过，如果您希望按照您当前的方式进行操作，CSS 代码如下：

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #dddddd;
  border-right-width:0px;
  border-left-width:0px;
}

演示：http://jsbin.com/IbebIpob/2/edit

- Christina

---

实际上，我不想在整个表格上有左/右边框，而不是单元格。我的表格只有一列，所以我只想去掉那些侧边框。 - Snowman

你正在使用Bootstrap 3吗？如果是的话，只需使用表格即可实现顶部和底部边框，没有左右边框。 - Christina

只有表格上的 .table 类会这样做。 - Christina

好的，这样就去掉了侧边框。不过现在最后一格没有底边框了。我怎样在表格的最后一行应用底边框呢？ - Snowman

最快的方法是：http://jsbin.com/IbebIpob/3/edit。.table { border-bottom: 1px solid #dddddd; } - Christina

Answer 2

试试这个：

border-right: hidden!important;

- Mehran Shagerdi