html - 如何将 border-bottom 应用于最后一个非空 <tr>？

Question

<分区>

Answer 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 类设置为 显示:无；?

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>