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。这种方法的缺点是您根据所包含的内容丢失了自动列宽大小，但好处是您可以避免上述边界问题。

我希望有所帮助。

tbody边框是渲染问题

1 个答案: