html - Bootstrap 表格单细胞悬停

Question

在创建日历时，我偶然发现了如何使单元格具有 bootstrap 4 悬停效果的问题。

How the calendar looks so far

我希望单元格具有类似于 Hoverable rows 的悬停效果无需更改 Bootstraps CSS。

有什么建议吗？当我在做的时候:有什么方法可以使表格完全对称(方形单元格)

编辑:

表 td:hover {
背景色:rgba(0,0,0,.075)；
}

是not realy working .单元格应该是深蓝色，而不是灰色。

Answer 1

你可以这样做

table td:hover {
    background-color: rgba(0,0,0,.075);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
  </tr>
</thead>
<tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
  </tr>
  <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
  </tr>
  <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
  </tr>
</tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>