javascript - 为 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;

  }

这是完整的代码:

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

因为 float 元素，父元素不会展开。color 和 background 被应用，但是 tr 没有高度来显示背景，这就是您看不到它的原因。

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>