Limit number of displayed table rows

user_9879442 0
Viewed 15116

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.

css html
4 Answers

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.

Admin1

Use a style="max-height: 600px; overflow: auto; display: inline-block;" on the table element(or surrounding DIV). Without knowing the rendered font, It is impossible to know precisely how many lines will show up in 600 pixels(adjust accordingly), but it will give scroll bars to allow all data to be seen.

user_103166400

I changed this

  • add a wrapper to limit the number of displays(max-height and overflow)
  • dynamic calculate offset top of the 10th table row 

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>

user_72913790

By using the CSS :nth-child selector (see: MDN), you can do something like this:

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

In this case it's also picking up your table header, so it's not quite so simple as n+10. You could then use some javascript to adjust the value as you wish.

user_82736860
Related