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

在表格元素（或周围的DIV）上使用style="max-height: 600px; overflow: auto; display: inline-block;"。如果不知道渲染的字体，就无法精确知道600像素（相应调整）中将显示多少行，但是它将提供滚动条以允许查看所有数据。

Answer 2

通过使用CSS :nth-child选择器（请参阅：MDN），您可以执行以下操作：

table tr:nth-child(n+12) {
  display:none;
}

在这种情况下，它还会拾取您的表头，因此它并不像n+10那样简单。然后，您可以根据需要使用一些JavaScript来调整值。

Answer 3

我改变了

添加包装程序以限制显示的数量（max-height和overflow）
动态计算第10个表格行顶部的偏移量

const tr10 = ($("#process-manager-table tr:eq(10)"))[0];
const tr10OffsetTop = tr10.clientHeight + tr10.offsetTop;

$('.wrapper').css('max-height', tr10OffsetTop);

.wrapper.overflow {
  overflow-y: scroll;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper overflow">


  <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>
</div>

Answer 4

在查看了您的JSFiddle中提供的代码之后，我设法进行了修改并使其适用于您：

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

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

限制显示的表格行数

HTML

4 个答案: