<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>
,还有其他方法吗?
PS:不知道里面有多少<td>
还是空<tr>
的<table>
换句话说,我想要这张桌子底部的红色边框https://jsfiddle.net/37L334hj/68/
对于复杂的 CSS 选择器,向后看并不是一个很好的方法。如果你的表格稍微复杂一点,使用 Next Sibling 和 General Sibling CSS 选择器会很快变得非常难看。你可以使用一些 JavaScript 吗?这将是微不足道的,只有 2 或 3 行。另请注意,您实际上无法border
向 a添加参数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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句