使用固定标题行

时间:2016-05-21 19:57:34

标签: css

我不太了解css,但我找到了一种方法来冻结我桌子的顶部标题。问题是,当我向列应用背景颜色时,它不会填充整个单元格。我希望背景能够一直填充到单元格的底部。考虑到我冻结桌子的标题行的方式,我能够做到这一点吗?

实施例

Background not filling to bottom of cell



@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';

.table-fixed thead {
  width: 98%;
}
.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;
  overflow-y: auto;
  overflow-wrap: break-word;
}
.table-fixed tbody td,
.table-fixed thead > tr > th {
  float: left;
  border-bottom-width: 0;
}

<div class="container">
  <div class="row">
    <div class="panel panel-default">
      <table class="table table-fixed ">
        <thead class="active">
          <tr>
            <th class="col-xs-3">Name</th>
            <th class="col-xs-3" style="background-color: #f0ee6f;">N/A</th>
            <th class="col-xs-3">N/A</th>
            <th class="col-xs-3">N/A</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="col-xs-3">History</td>
            <td class="col-xs-3" style="background-color: #f0ee6f;">N/A</td>
            <td class="col-xs-3">N/A</td>
            <td class="col-xs-3">N/A</td>
          </tr>
          <tr>
            <td class="col-xs-3">Comments</td>
            <td class="col-xs-3" style="background-color: #f0ee6f;">N/A</td>
            <td class="col-xs-3">N/A</td>
            <td class="col-xs-3">N/A</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案