Question

我有一个类似以下示例的表格：https://jsfiddle.net/nmw82od1/
我有这个CSS：

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

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

当我悬停一个td时，我希望在每个td中都有一个边框。
如果我使用double，则除了顶部的行外，它还可用于所有其他单元格。

有人能按预期完成边境工作吗？

Answer 1

您遇到的问题归因于display属性table-cell，该属性是由引导程序添加的。要解决此问题，请使用display:block。以下有效的代码段：

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

.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>

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

1 个答案: