Log in

View Full Version : Resolved How to target a specific row in a table??



Snookerman
10-18-2008, 09:51 AM
I have a page with a table with three rows. I want to remove the second row. I do not have access to the page, I only have access to its css document. The row I want to remove does not have an id or a class. It only contains a non-breaking space. If I use

table tbody tr td {
display:none
}
then I lose the third row which I actually need. Is there any way for me to target only the second row using css? It should be something like this:

table tbody tr td(second) {
display:none
}
Of course that doesn't work but there should be something similar that works.

Another solution would be to actually use the first option, which would hide the entire table, and then use css to make the third row display anyways instead of inheriting the display:none value. The third row does have a id value which I can use. Visibility:hidden and visible is not got since the row would still take up the space. I need to get rid of it.
Please help me, thanks!

Medyman
10-18-2008, 01:30 PM
You have two options here:

1. Advanced CSS Selectors
There is the nth-child() pseudo class selector (http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#nth-child-pseudo). That would work in this case but it's not supported by all browsers.

2. Use the third row's id
If the snippet you posted gets rid of the second and third rows, add this below it to re-display the third row:

#third-row {
display:block;
}
You would replace third-row with the id of the actual third row.

Snookerman
10-18-2008, 01:43 PM
Thanks, your second option was the first thing I tried, I tried both block, inline but it still didn't work. I realize now it is because the row itself does not have an id, it is a div container inside the third row that does. If I make it display it wont matter since the row it is in does not display. I'll take a look at your first option, hopefully it will work in most browsers.