How to display only the first row of a table?

Posted on

Question :

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() {


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=""></script><aid="mostrar" href="javascript:void(0)">Mostrar detalhes</a>
<table style="width:100%">


Leave a Reply

Your email address will not be published. Required fields are marked *