如何从第二个td（包括在内）开始（有效）隐藏表中的td？

Question

Let's say I have a table like the one below:

   <table id='randData'>
    <tr>
       <td >56</td>
       <td >Call me</td>
       <td >Blah</td>
       ...
    </tr>
   <tr>
  </table>

What is the best way to hide the tds starting from the second (included) till the end? Adding a class for the tds that will be hidden is more efficient? Is there a way of solving this using an expression with nth-child?

Answer 1

I'll present 2 simple ways!

#1

The idea: Hide every td tag, and then un-hide the 1st one.

tr > td {
    display: none; /* Hidden! */
}
tr > td:first-child {
    display: initial; /* Undo hiding on only the 1st td */
}

#2

The idea: Hide every sibling beyond the 1st child

tr > td ~ td {
    display: none;
}

The reason I'm giving the 1st option as well as this one is that not everyone likes the ~ selector (which selects all children beyond the child to the left of the ~ symbol in case you're not familiar with it!)

Answer 2

Unless you are animating with jQuery I prefer to just use classes which I think everyone will agree is the most efficient way. You can select all the td elements from the second and up like this in CSS:

tr.hide > td:nth-child(n+2) {
    display: none;
}

Now just drop the hide class on the rows you want to hide the 2nd and up.

Answer 3

$("#randData td").eq(1).nextUntil("tr").hide();

如果您必须使用jQuery，那将是我的直接猜测

Answer 4

Using jquery .not() and :first selector.

$('table tr td:not(:first)').hide();

Example : https://jsfiddle.net/DinoMyte/3dzxsxgq/