テーブルの最後の行の境界を削除する方法

Question

テーブルの最後の行の境界を削除して、 テーブルが2番目の最後の行自体で完成するようにしたいと思います。

私はCSSでテーブルborder = '0'を作成し、最後の行を除くすべてのtrにborder = '1'を与える​​ことでこれを試しました。クロムとサファリでは完璧に動作しますが、IE11では動作しません。

IE11でも同様にサポートするための方法はありますか？

Answer 1

スクロールセレクター:last-of-typeを使用してください。

table { 
    border-collapse: collapse; 
} 
tr { 
    border: 1px solid black; 
} 
#noEndBorder tr:last-of-type { 
    border: 0; 
} 

<table> 
    <tr> 
    <td>one</td> 
    </tr> 
    <tr> 
    <td>two</td> 
    </tr> 
    <tr> 
    <td>three</td> 
    </tr> 
    <tr> 
    <td>four</td> 
    </tr> 
</table> 
<br> 
<br> 
<table id="noEndBorder"> 
    <tr> 
    <td>one</td> 
    </tr> 
    <tr> 
    <td>two</td> 
    </tr> 
    <tr> 
    <td>three</td> 
    </tr> 
    <tr> 
    <td>four</td> 
    </tr> 
</table> 

EDIT は、複数のテーブルを反映するようにコードを更新するが、一端のみでない境界を示しません。

https://jsfiddle.net/venLzgq5/1/