Caverman Caverman - 8 months ago 47
CSS Question

Trying to overwrite Bootstrap table-striped color in LESS not applying?

I'm trying to make a common CSS class in my LESS file that inherits from Bootstrap's table. If I take the default it works fine but I would like to change the color of the striped rows. Doing some research I found some code that should work but it's not applying. Actually it's overwriting the default Bootstrap .table-striped and doesn't even show the normal white background color.

.vtc-table{
.table;
.table-condensed;
.table-bordered;
.table-hover;
.table-striped > tbody > tr:nth-child(odd) > td {
background-color: antiquewhite;
}
th {
background-color: #2FA4E7;
color: white;
}
}


I'm just calling the common class at the table level.

<table class="vtc-table">


UPDATE

Great Thanks to the help of @makshh this is ultimately what we came up with that worked. This adds a border around the whole table as well as rows/cells, sets the main color of the rows to white, and then colors the "odd" rows with antiquewhite. Hopefully this will help someone else as well.

.vtc-table {
border: 1px solid #ddd;
}
.vtc-table > thead > tr > th,
.vtc-table > tbody > tr > th,
.vtc-table > tfoot > tr > th,
.vtc-table > thead > tr > td,
.vtc-table > tbody > tr > td,
.vtc-table > tfoot > tr > td {
border: 1px solid #ddd;
}
.vtc-table > thead > tr > th,
.vtc-table > thead > tr > td {
border-bottom-width: 2px;
}
.vtc-table > tbody > tr {
background-color: white;
}
.vtc-table > tbody > tr:nth-of-type(odd) {
background-color: #fcf8e3;
}
.vtc-table > thead > tr > th,
.vtc-table > tbody > tr > th,
.vtc-table > tfoot > tr > th {
background-color: #2FA4E7;
color: white;
}


And it's called like this in the HTML.

<table class="table vtc-table">

Answer
  1. table-striped class has to be added to the table div (you have to use &).
  2. Proper selector for striped table is .table-striped > tbody > tr:nth-of-type(odd).
  3. If you want to change th you have to use different selectors (to avoid low specificity).

.vtc-table {
  .table;
  .table-condensed;
  .table-bordered; 
  .table-hover;
  &.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: antiquewhite;
  }
  > thead > tr > th,
  > tbody > tr > th,
  > tfoot > tr > th {
    background-color: #2FA4E7;
    color: white;
  } 
}