css - tbody 边框呈现问题

Question

我正在使用 angularJS 对多个搜索结果进行 ngRepeat，以便将它们显示在表格中。每个结果都包含许多表格行和列，因此 ngRepeat 会重复 tbody 容器以包含完整结果。

我遇到的问题是围绕每个 tbody 设置边框样式。每个边框在鼠标悬停时从透明过渡到指定的颜色，但是由于默认的 border-collapse: collapse; 属性，边框的边缘看起来重叠，这使得它们看起来被切断，并且一般坏了。如果我使用 border-collapse: separate; 和 display: block;，我可以使边框显示正确，但我失去了表格通常会很好的列水平间距提供。

我的目标是让每个 tbody 都有自己的边框，这样我就可以在鼠标悬停时转换颜色，同时保持相对于 th 标签的适当水平间距显示在表格的顶部。

这是我所拥有的简化版本:

HTML:

<table>
<thead>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
</thead>
<tbody ng-repeat="result in results">
    <tr>
        <td>{{result.a}}</td>
        <td>{{result.b}}</td>
        <td>{{result.c}}</td>
    </tr>
    <tr>
        <td colspan="3">
        <div>{{result.d}}</div>
        </td>
    </tr>
</tbody>

CSS:

tbody {
  transition: border-color 0.6s ease;
  -webkit-transition: border-color 0.6s ease; /* Safari */
  border 4px solid black;
}

tbody:hover {
  border-color: red;
}

我咨询过: tbody border not showing , Add borders on <tbody> , Border-top from tbody and border-bottom from thead don't work at the same time? 除其他外..

提前致谢。

Answer 1

对于将来遇到类似问题的任何人，我最终通过完全避免使用表格和 tbody 标签来解决这个问题。我使用一系列 div 将布局设​​置为在视觉上类似于表格，允许我以通常的方式将边框应用于 div。这种方法的缺点是您失去了根据包含的内容自动调整列宽大小的功能，但优点是您避免了上述边框问题。

希望对您有所帮助。