CODEWITHSUNDEEP
htmlcss
Flame Stinger
Flame Stinger

Reputation: 139

Limit number of displayed table rows

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.

Upvotes: 4

Views: 20245

Answers (4)

user8871181
user8871181

Reputation:

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.

Upvotes: 4

user10316640
user10316640

Reputation:

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.

Upvotes: 2

Chunbin Li
Chunbin Li

Reputation: 2244

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>

Upvotes: 2

Frish
Frish

Reputation: 1421

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.

Upvotes: 2

Related Questions