我正在使用 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>
最佳答案
因为 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>
关于javascript - 为 td 添加背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42880794/