如何将border-bottom 应用于最后一个非空<tr>？ [复制]答案

【问题标题】：How can I apply border-bottom to the last not empty <tr>? [duplicate]如何将border-bottom 应用于最后一个非空<tr>？ [复制]
【发布时间】：2018-10-17 21:44:28
【问题描述】：

<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>应用border-bottom但是不知道怎么选择最后一个不为空的<tr>，有没有其他办法呢？

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

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

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

对于复杂的向后看的 CSS 选择器来说，实际上并没有什么好方法。如果您的表格稍微复杂一点，使用 Next Sibling 和 General Sibling 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>

【讨论】：