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>

我想将border-bottom应用于此类<table>，但我不知道如何选择最后一个不为空的<tr>，还有其他方法吗？< / p>

PS：我不知道<td>

中有多少<tr>或空<table>

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

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类设置为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>

如何将border-bottom应用到最后一个不空？

1 个答案: