How to display only the first row of a table?

Question

How to display only the first row of a table?

Navigation

#1 by (6 votes)

5

I have a table with summaries about a particular client, where the first line is the main content to be displayed, and the rest is a mere complement.

I know I could apply display: none , but I do not think that should be the best way to do it. I want to hide the rest of <tr> and display them with toggle , which is already being done:

$('#toggle-posicao-financeira').click(function() {
        $('#table-posicao-financeira').fadeToggle();
});

html jquery css

asked by anonymous 04.05.2016 / 21:14

1 answer

Time series autocorrelation How to get the current path of a .sh script?

score 6 · Accepted Answer

See the example using the :not(first-child) selector to manipulate only the other lines.

CSS : tr:not(:first-child) - Manipulate all non-first rows in the table.
Jquery tr:not(:first-child) - Performs the event only on lines other than the first.

$('#mostrar').on('click', function() {
  $('table tr:not(:first-child)').toggle();
});

table tr:not(:first-child) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><aid="mostrar" href="javascript:void(0)">Mostrar detalhes</a>
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Arth</td>
    <td>90</td>
  </tr>
</table>