Bootstrap table-bordered remove right, left borders

Question

I'm using a table like so:

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

This table creates cells that have borders on all four sides. What I want is to remove the left and right borders, but keep top and bottom.

I tried:

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

However, this does not remove the left or right borders, but it does apply a red bottom border, so I know it's at least processing this CSS, but with no effect for removing borders.

Any ideas?

Answer 1

try this:

border-right: hidden!important;

Answer 2

Change this: <table class="table table-hover table-bordered">

To this: <table class="table table-hover">

And then add this css:

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

However, if you want to do it the way you're doing it, the css is:

.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