Limit number of displayed table rows

Question

If I have a simple HTML table with lots of rows how can I only show x amount of rows?

HTML

        <table id="process-manager-table">
            <tr>
                <th>Process</th>
                <th>User</th>
                <th>CPU%</th>
            </tr>
            <tr>
                <td>system-welcome.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
            <tr>
                <td>process-manager.exe</td>
                <td>dvette</td>
                <td>-</td>
            </tr>
        </table>

How could I display only the first 10 rows, for example? I basically want to give my table a specific height - the user should then be able to scroll vertically within the table to view the rest of the rows.

Answer 1

After looking at the code provided in your JSFiddle, I have managed to modify and get this working for you:

https://jsfiddle.net/83krL60s/10/

Basically, all you need to do is put your table inside a div and set it's height.