我怎样才能在 table 的最后一个可见行上放置一个 border-bottom，border-collapse=separate？

Question

我有一个 table 有 border-collapse: separate 以便有圆角。

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

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

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

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

编辑

我知道获得 "last visible element" isn't really possible in general in CSS，但是，我很想知道为什么 tbody 与 border-collapse:separate 接壤会失败，如果有办法的话即使使用 separate.

也能恢复这种很酷的行为

Answer 1

如果可以在 <tr> 可见或不可见时更改 HTML，我认为最直接的方法是在 <tfoot> 不可见时将其放在 <tfoot> 中。然后你可以保留 tbody 周围的边框（或者更确切地说，tbody 中的单元格周围）并使 tfoot 不可见。

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;}

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

正如评论中提到的那样，替代解决方案可能是将边框放在 table 周围而不是单元格周围（这样您就不必担心哪些行可见；您可能有重新计算你的边距和填充），或者根本不输出不可见的行（重新加载页面时将它们从输出流中移除，或者使用 Javascript 从 DOM 树中删除它们） .

我怎样才能在 table 的最后一个可见行上放置一个 border-bottom，border-collapse=separate？

How can I place a border-bottom on the last visible row of a table with border-collapse=separate?

css

border