add background color to td

Question

I am developing a table in html5 using css3, this table has the functionality that when clicking a record the full row is selected so that the user can see which register is selected and works perfectly, but I tried to put a vertical scrollbar by adding it A few styles in css when selecting the row does not add the background color property. These are the css properties that do not allow the background color to be displayed:

 .table-fixed thead {
  width: 97%;
  }
  .table-fixed tbody {
    height: 500px;
    overflow-y: auto;
    width: 100%;
  }
  .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
    display: block;
  }
  .table-fixed tbody td, .table-fixed thead > tr> th {
    float: left;
    border-bottom-width: 0;

  }

this is the full code:

 $("#table tr").click(function() { $(this).addClass('selected').siblings().removeClass('selected'); }); 

 td { border: 1px #DDD solid; padding: 5px; cursor: pointer; } .selected { background-color: #18a7ec !important; color: #FFF; } .table-fixed thead { width: 97%; } .table-fixed tbody { height: 500px; overflow-y: auto; width: 100%; } .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th { display: block; } .table-fixed tbody td, .table-fixed thead>tr>th { float: left; border-bottom-width: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tabla" class="col-md-4"> <div class="container"> <div class="row"> <div class="panel panel-default"> <div class="panel-heading"> <h4> Fixed Header Scrolling Table </h4> </div> <table id="table" class="table table-fixed"> <thead> <tr> <th class="col-xs-2">#Visita</th> <th class="col-xs-3">Código</th> <th class="col-xs-4">Cliente</th> <th class="col-xs-3">Inicio</th> </tr> </thead> <tbody class="datos"> <tr> <td class="col-xs-2">1111</td> <td class="col-xs-3">1111</td> <td class="col-xs-4">1111</td> <td class="col-xs-3">1111</td> </tr> <tr> <td class="col-xs-2">2222</td> <td class="col-xs-3">2222</td> <td class="col-xs-4">2222</td> <td class="col-xs-3">2222</td> </tr> <tr> <td class="col-xs-2">3333</td> <td class="col-xs-3">3333</td> <td class="col-xs-4">3333</td> <td class="col-xs-3">3333</td> </tr> </tbody> </table> </div> </div> </div> </div> 

Answer 1

because of floatting elements, the parent doesn't expand . color and background is applied, but tr has no height to show the background , that's why you do not see it.

overflow:hidden is one way to reset the BFC , clearing floats .

 $("#table tr").click(function() { $(this).addClass('selected').siblings().removeClass('selected'); }); 

 td { border: 1px #DDD solid; padding: 5px; cursor: pointer; } .selected { background-color: #18a7ec !important; color: #FFF; } .table-fixed thead { width: 97%; } .table-fixed tbody { height: 500px; overflow-y: auto; width: 100%; } .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th { display: block; } tr { overflow:hidden; } .table-fixed tbody td, .table-fixed thead>tr>th { float: left; border-bottom-width: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tabla" class="col-md-4"> <div class="container"> <div class="row"> <div class="panel panel-default"> <div class="panel-heading"> <h4> Fixed Header Scrolling Table </h4> </div> <table id="table" class="table table-fixed"> <thead> <tr> <th class="col-xs-2">#Visita</th> <th class="col-xs-3">Código</th> <th class="col-xs-4">Cliente</th> <th class="col-xs-3">Inicio</th> </tr> </thead> <tbody class="datos"> <tr> <td class="col-xs-2">1111</td> <td class="col-xs-3">1111</td> <td class="col-xs-4">1111</td> <td class="col-xs-3">1111</td> </tr> <tr> <td class="col-xs-2">2222</td> <td class="col-xs-3">2222</td> <td class="col-xs-4">2222</td> <td class="col-xs-3">2222</td> </tr> <tr> <td class="col-xs-2">3333</td> <td class="col-xs-3">3333</td> <td class="col-xs-4">3333</td> <td class="col-xs-3">3333</td> </tr> </tbody> </table> </div> </div> </div> </div>