Question

我正在使用这样的表：

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

此表创建在所有四个边上都有边框的单元格。我想要的是删除左右边框，但保持顶部和底部。

我试过了：

.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，但对删除边框没有影响。

有什么想法吗？

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

DEMO：http://jsbin.com/IbebIpob/2/edit

Bootstrap以表格为边界删除右边界，左边界

1 个答案: