csshtml-tabledisplaytag

Use CSS to hide some columns in a gridview


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>