我有一個簡單的表使用table-hover
小提琴
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Fleet</th>
<th scope="col">Location</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">R132</th>
<td>High St</td>
<td>ON TIME</td>
</tr>
<tr>
<th scope="row">R100</th>
<td>St Martins</td>
<td>LATE</td>
</tr>
<tr>
<th scope="row">W101</th>
<td>Cafe St</td>
<td>EARLY</td>
</tr>
</tbody>
</table>
我找到了更改默認懸停顏色的方法，并且可以使用通常的條件格式更改表格行或單元格背景，但這不是我想要的。
例如
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: #color;
}
我正在嘗試根據“狀態”列中的值格式化懸停顏色，紅色表示“遲到”，綠色表示“早”等，這樣我就可以保持表格的外觀和感覺。
uj5u.com熱心網友回復：
您可以簡單地向您的tr添加類，指示您希望在懸停時看到的顏色
.ontime:hover {
background-color: yellow;
}
.late:hover {
background-color: red;
}
.early:hover {
background-color: green;
}<table class="table table-hover">
<thead>
<tr>
<th scope="col">Fleet</th>
<th scope="col">Location</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr class="ontime">
<th scope="row">R132</th>
<td>High St</td>
<td>ON TIME</td>
</tr>
<tr class="late">
<th scope="row">R100</th>
<td>St Martins</td>
<td>LATE</td>
</tr>
<tr class="early">
<th scope="row">W101</th>
<td>Cafe St</td>
<td>EARLY</td>
</tr>
</tbody>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/533130.html