Change line color of .table-bordered in Twitter Bootstrap

Question

I am styling a number of tables with twitter bootstrap and am using the .table.table-bordered class. The default border color is gray, which is good for all my tables except one. For one table, I would like to change this border color to black and also make the lines thicker if possible. I am using less.

I've researched it and found the @tableBorder variable which I can customize but changing this changes the color of all the tables.

I tried giving the table a class and putting this in the css file:

.differentTable {
   @tableBorder: black;
}

...but that did not seem to change anything (not sure why).

Any help would be greatly appreciated.

Answer 1

@tableBorder is a variable, not a property.

You can just add this to your CSS:

.differentTable, .differentTable td{
   border-color: black;
}

Answer 2

The best way is

.table {
  border: 0.5px solid #000000;
}
.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: 0.5px solid #000000;
}