tdに背景色を追加

Question

私はcss3を使用してhtml5で表を作成していますが、この表にはレコードをクリックすると完全な行が選択されているため、それを追加して垂直スクロールバーを配置する行を選択するとCSSのいくつかのスタイルは、背景色のプロパティを追加しません。これらは、背景色を表示することはできませんCSSプロパティです：

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

    } 

これは完全なコードです：なぜならfloatting要素の

$("#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

、親のdoesn展開しないでください。 colorとbackgroundが適用されますが、trにはbackgroundの高さが表示されないため、表示されません。

overflow:hiddenは、BFC,clearing floatsをリセットする方法の1つです。

$("#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>