将鼠标悬停在带有表格边框的引导表中的单元格上时添加边框

Question

我有一个像这样的表：https://jsfiddle.net/nmw82od1/
我有这个 css：

.table1 td:hover {
  border: 1px solid black;
}

.table2 td:hover {
  border: 1px double black;
}

当我悬停一个 td 时，我希望每个 td 都有一个边框。
如果我使用双精度，它适用于所有其他单元格，而不是顶部的行。

任何人都有一个好的解决方案来按预期进行边境工作？

Answer 1

您面临的问题是由于引导程序添加的display 属性table-cell。要解决，请使用display:block。在下面工作 sn-p：

更新：添加小填充以解决跳跃效果...

.table1 td:hover {
  border: 1px solid black;
  padding: 11px 11px;
  display: block;
}

.table2 td:hover {
  border: 1px double black;
}

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

<div class="container">
  <table class="table1 table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Donald</td>
        <td>Duck</td>
        <td>donald@duck.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Daisy</td>
        <td>Duck</td>
        <td>daisy@duck.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Scrooge</td>
        <td>McDuck</td>
        <td>scrooge@mcduck.com</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Gladstone</td>
        <td>Gander</td>
        <td>gladstone@gander.com</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="container">
  <table class="table2 table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Donald</td>
        <td>Duck</td>
        <td>donald@duck.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Daisy</td>
        <td>Duck</td>
        <td>daisy@duck.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Scrooge</td>
        <td>McDuck</td>
        <td>scrooge@mcduck.com</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Gladstone</td>
        <td>Gander</td>
        <td>gladstone@gander.com</td>
      </tr>
    </tbody>
  </table>
</div>