html - 限制显示的表格行数

Question

如果我有一个包含很多行的简单 HTML 表格，我如何才能只显示 x 行数？

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>

例如，我怎样才能只显示前 10 行？我基本上想给我的表格指定一个特定的高度 - 然后用户应该能够在表格内垂直滚动以查看其余的行。

Answer 1

在查看了您的 JSFiddle 中提供的代码后，我已经设法修改并使它为您工作:

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

基本上，您需要做的就是将您的table 放在div 中并设置它的高度。