Bootstrap 条纹 table - 行边框与最近的行重叠

Question

我运行在做一些本应非常简单的事情时遇到了问题...将 1px 顶部和底部边框添加到 bootstrap table 行 (tr)，当徘徊。 table 是条纹的，但我认为这不重要（不使用 bootstrap 的 table-striped class 但我检查过，使用它时也会发生这种情况）。这是一个 Angular 应用程序。

问题：未显示 1px 顶部边框，因为未悬停的前一行有一个 1px 底部边框与悬停行重叠。显示上一行的边框，而悬停行的边框不显示。如果我将悬停边框更改为 2px，它就会显示（1px 在上一行底部边框后面，显示第二个 px）。

我本可以使用 "previous sibling" 选择器（与 + 选择器相反），如果有的话...删除上一行的底部边框；

如何为悬停的 table 行提供 1px 的顶部和底部边框？

Fiddle

Answer 1

不知道我理解的对不对，如果能发个fiddle就好了。但是如果我没看错，你可以在 table 行中添加 padding-top: 1px; 和 padding-bottom: 1px （或者如果它上面已经有填充，只需在顶部和底部添加 1px），当它悬停时。

Answer 2

去掉所有边框底部，看起来不错：

tr td {
    border-bottom: 0 !important;
}

tr:hover td {
    border: solid 1px red !important;
}

https://jsfiddle.net/asbjsvtu/

Answer 3

这可能会有所帮助。

.table tr:hover td {
  border-top: 1px solid red !important;
  border-bottom: 1px solid red !important;
}
.table thead tr th {
  border: none !important;
}
.table tbody:last-child {
  border-bottom: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Bootstrap 条纹 table - 行边框与最近的行重叠

Bootstrap striped table - row border overlaps with closest rows

css

less

twitter-bootstrap

angular-ui-bootstrap