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;
}
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>