Question

我有一张border-collapse: separate的桌子，以便有圆角。

我需要在整个桌子周围设置边框，但内部单元格周围没有任何边框。

没有border-collapse: separate tbody元素的边框就可以了！使用separate，我可以在th元素上放置一个上边框，在tr:last-child>td元素上放置一个下边框，在th:first-child,td:first-child上放置一个左边框，在th:last-child,td:last-child上放一个右边框。这一切都很棒。我甚至可以用更多的代码将边界半径放在适当的选择器上。

现在来了困难的部分。有时，表格的最后一行会有display:none。我需要将底部边框应用于最后一个可见行。正如我之前提到的，当border-collapse为collapse时，<tbody>周围的边框效果很好！但是，对于separate，tbody周围的边框不再有效。

在CSS中有没有办法指定最后一个非隐藏tr所以我可以在其上放置一个边框底部？或者我必须使用JavaScript吗？

修改

我知道最后一个可见元素＆＃34; isn't really possible in general in CSS但是，我很想知道为什么tbody与border-collapse:separate失败并且如果有办法在separate时找回这种很酷的行为。

Answer 1

如果您可以在<tr>变得可见或不可见时更改HTML，我认为最直接的方法是将其置于<tfoot>中，只要它不可见。然后你可以保持tbody周围的边界（或者更确切地说，围绕tbody中的细胞）并使tfoot不可见。

＆＃13;

table, tbody, thead, tfoot, tr {
  border-collapse: separate; border-spacing: 0; border-radius: .5em;
}

tbody tr:first-child td {border-top: 2px outset #777;}

tbody tr:last-child td {border-bottom: 2px outset #777;}

tbody td:first-child {border-left: 2px outset #777;}

tbody td:last-child {border-right: 2px outset #777;}

tbody tr:first-child td:first-child {border-top-left-radius: 0.5em;}

tbody tr:first-child td:last-child {border-top-right-radius: 0.5em;}

tbody tr:last-child td:first-child {border-bottom-left-radius: 0.5em;}

tbody tr:last-child td:last-child {border-bottom-right-radius: 0.5em;}

.invisible {visibility: collapse; display: none;}

＆＃13;

<table>
  <caption>This is the table:</caption>
  <tbody>
    <tr>
      <td>this is visible.</td>
      <td>this is visible.</td>
    </tr>
    <tr>
      <td>this is visible.</td>
      <td>this is visible.</td>
    </tr>
  </tbody>
  <tfoot class="invisible">
    <tr>
      <td colspan="3">this is not.</td>
    </tr>
  </tfoot>
</table>

＆＃13;

正如评论中所提到的，替代解决方案可能是将边框放在桌子周围而不是围绕单元格（这样您就不必担心哪些行可见;您可能需要重新计算边距和paddings虽然），或根本不输出不可见的行（重新加载页面时将它们从输出流中删除，或使用Javascript从DOM树中删除它们。）

如何在border-collapse = separate的表的最后一个可见行上放置border-bottom？

1 个答案: