如何将下边框应用于最后一个不为空<tr>的位置？

Question

<table>
<tr class="empty-row"></tr>
<tr class="empty-row"></tr>
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr class="empty-row"></tr>
<tr class="empty-row"></tr>
</table>

我想对这种<table>应用底部边框，但我不知道如何选择最后一个不空的<tr>，还有其他方法吗？

PS：我不知道<table>里有多少<td>或空<tr>

---

换句话说，我想要此表底部的红色边框 https://jsfiddle.net/37L334hj/68/

Answer 1

没有一种很好的方法来做向后看的复杂CSS选择器。如果你的表稍微复杂一点，使用下一个同级和一般同级CSS选择器会很快变得非常丑陋。你能使用一些JavaScript吗？这将是微不足道的，只有 2 或 3 行。另请注意，您实际上不能将border参数添加到tr，但可以添加到td。对于这个例子，我只是做了一个 1px 的框阴影。

let rows = document.querySelectorAll('tr:not(.empty-row)');
let lastRow = rows[rows.length - 1];
lastRow.setAttribute( 'style', 'box-shadow: 0 1px 0 red' );

<table>
<tr class="empty-row"></tr>
<tr class="empty-row"></tr>
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
<tr class="empty-row"></tr>
<tr class="empty-row"></tr>
</table>

综上所述，如果您只需要在表格底部设置边框，是否可以在表格底部放置边框并将.empty-row类设置为display: none;？

table { border-bottom: 1px solid green; }
tr.empty-row { display: none; }

<table>
<tr class="empty-row"></tr>
<tr class="empty-row"></tr>
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
<tr class="empty-row"></tr>
<tr class="empty-row"></tr>
</table>