Use CSS to hide some columns in a gridview

March 24, 2022

I have gridview (asp.NET) that populates automatically, and I use CSS to format it as a table. I need to set display:none for about the first six rows. I can do that with javascript, but is there an elegant way to do it with CSS? I tried:

#myTable td:eq(0)

which give me an error, and:

#myTable tr:nth-child(0)  {display:none}

which doesn’t error, but also doesn’t work. If these worked, I could hide my columns one by one, but I have about seven or eight columns to hide. So I guess I have two questions, first, can I hide some columns but not others, and second, can I hide a range?

UPDATE, based Miak’s answer. Here’s the complete working solution:

#gvLoadStatus th:nth-child(-n+9) { 
    display: none; 
}            
#gvLoadStatus td:nth-child(-n+9) { 
     display: none; 
}

>Solution :

To hide the first 6 rows you can use this: tr:nth-child(-n+6)

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

<table>
  <tr>
    <td>1</td>
    <td>2</td> 
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>   
  </tr>  
  <tr>
    <td>3</td>
    <td>2</td> 
  </tr>
  <tr>
    <td>4</td>
    <td>2</td>   
  </tr>  
  <tr>
    <td>5</td>
    <td>2</td> 
  </tr>
  <tr>
    <td>6</td>
    <td>2</td>   
  </tr>    
  <tr>
    <td>7</td>
    <td>2</td>   
  </tr>    
  <tr>
    <td>8</td>
    <td>2</td>   
  </tr>      
</table>