How to remove inherited "display:none" value

[Snookerman]

Hi
I have to create a page for a website I am working on. I have an iframe with a page that i do not have the possibility to change. I am however able to link it to my own .css document through the link (.aspx&blablabla?style=myowncss.css)
I have the .css file working fine but there is a problem.

The page I cannot change has a table with rows that I need and rows that I don't need. To simplify, the table has 3 rows.

The first one contains another table with a id value so I can easily remove it by using "display:none".

The second row however contains just a non-breaking space (i.e. & nbsp; ). I do not want this row to show either.

The third row contains a div with the info I actually need. The div has an id value so I can access it.

My problem is then this: The only way I could come up with to access the second row with the non-breaking space and remove it was to use this in the .css file:

table tbody tr td {
display:none;
}
This does "remove" the second row, but of course removes all rows in the table, including the third one which I need.

My question: keeping in mind that I can only access the .css file, how can I make the second row disappear (i.e. not display) without affecting the third row. Like I said, the first row contains another table with an id value and the third row contains a div with an id value. The second one is just a row with no class or id values.

The solution would be, either to somehow just access the second row and give it the display:none value, or to do what I did, i.e. to hide all the rows and then somehow make the third row not follow this, i.e. not inherit this display:none value.

I have tried giving the div with the id the value display:inline, but it made no difference. Just to make this clear, all three rows are in the same tbody tag. Here is a simplified version of what I have:


<table>
<tbody>
<tr>
<td><table id="idvalue1" class="classvalue1">I don't need/want this to show</table></td>
</tr>
<tr>
<td>&nbsp;</td>//Don't want this to show either
</tr>
<tr>
<td><div id="idvalue2">I need this to show</div></td>
</tr>
</tbody>
</table>

Please help me. Thanks!

[Moshambi]

I achieved the effect you stated like this:




table tr td
{
visibility: hidden;
}

div#idvalue2
{
visibility: visible;
}



Hope this helps.

[Snookerman]

Thanks for your help. I understand I was a bit unclear. I need to use display:none, because I need to get rid of the first two rows altogether. If I use visibility:hidden I only hide them, but they still take up the space and thus give me a vertical scroll bar that I don't need and cannot have. Also since there only is a non-breaking space there, hiding it will make no difference.
So I need a solution where I actually get rid of the first two rows so they do not take any space at all. As far as I know only display:none can do that. The problem then still remains. How do I make the third row display while the first two are not displayed?
Thanks!

[TheJoshMan]

why not just use this...



table#idvalue1.classvalue1{
display:none;
}

[Snookerman]

I am using that, but I don't want the second row to show either, and that one does not have any id or class.

[TheJoshMan]

then use this...



table tbody tr td, table tbody tr tr td {
display:none;
}
table tbody tr tr tr td {
display:block;
}

[Snookerman]

Thanks, it feels that we are on the right track now, the problem is that the <tr> tags are not nested which means your solution doesn't work (I tried it). If that could just be rewritten somehow to target just the second row specifically. Maybe something else instead of a space between "tr" and "tr". You don't need to bother about hiding the first row, since it has an id and a class so I can deal with that easily. Thanks for your help!