添加背景颜色到td

Question

我正在使用css3在html5中开发一个表，这个表具有以下功能：当单击一个记录时，选择完整行，以便用户可以看到选择了哪个寄存器并且工作正常，但我试图放置一个垂直滚动条通过添加它在选择行时css中的一些样式不会添加背景颜色属性。这些是不允许显示背景颜色的css属性：

4.9

这是完整的代码：

＆＃13;

＆＃13;

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

  }

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于浮动元素，父级不会展开。color和background已应用，但tr没有高度显示background，这就是为什么你看不到它。

overflow:hidden是重置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>