Hide excess table rows

Using only css, hide excess table rows. This is perfect for a leaderboard, where you only want to show the top certain amount,

HTML

<table border="1">
    <tr>
        <td>1</td>
        <td>visible</td>
    </tr>
    <tr>
        <td>2</td>
        <td>visible</td>
    </tr>
    <tr>
        <td>3</td>
        <td>visible</td>
    </tr>
    <tr>
        <td>4</td>
        <td>hidden</td>
    </tr>
</table>

CSS

/*this is necessary so the excess rows do not take up space*/
table {
    border-collapse: collapse;
}

/*Hide any after the 3th*/
tr:nth-child(n + 4) {
    visibility: hidden;
}