tags:

views:

71

answers:

7

Hi, I have a question, I what to hide from CSS column number 2 and 4 from the table . Can I detect that columns from CSS.

Thanks !!

+1  A: 

Add classes to the appropriate rows, and then you can use that to hide those rows.

There are nth-child selectors, but those will only work on more recent browsers.

GSto
I can't add classes, that why I'm asking. It is a dynamic table.
Alexander Corotchi
I'm lost, what do you mean with 'dynamic table'?
metrobalderas
Presumably a table whose contents are manipulated in JavaScript.
Dominic Rodger
A: 

You can do that with CSS 3 selectors - specifically :nth-child. Note that this solution won't work on most browsers at present (it basically only works properly in Firefox 3.1b and higher).

If you don't have access to change the classes, and you can't use JavaScript, then I'm afraid you're out of luck.

Dominic Rodger
In CSS3 , i know, but I need for CSS2 :(
Alexander Corotchi
There is no CSS2 selector for this, you would have to use class name or do it in JavaScript
roryf
+1  A: 

Take a look at the nth-child and nth-of-type psudo classes.

Something like

td:nth-of-type(2) { visible: false; }
td:nth-of-type(4) { visible: false; }
Robert Christie
Won't that hide every second column (i.e. including the 6th)?
Dominic Rodger
good one, but WIll work just for CSS3
Alexander Corotchi
will it work in IE 7 and 8?
metal-gear-solid
@Dominic Rodger: Thanks - have removed 'n' from argument
Robert Christie
A: 

You can, but since that is CSS3, it won't work on IE and older versions of Firefox and some other browsers. Check out :nth-child.

IMHO, the best you could do is add a class to each row you want to target.

metrobalderas
+2  A: 

Use jQuery if you can:

$("table td:nth-child(2)").addClass("col2");
$("table td:nth-child(4)").addClass("col4");

CSS:

.col2, .col4 { display: none }
Nimbuz
I think you mean `2` in your first line of code.
Dominic Rodger
Thanks, corrected.
Nimbuz
A: 

Some CSS 3 answers have been given. A CSS 2-compatible solution would be the following, assuming you can identify the table somehow (pretend it has the class "foo"):

table.foo > tbody > tr > td:first-class + td, /* column 2 */
table.foo > tbody > tr > td:first-class + td + td + td /* column 4 */
{display: none;}

Note that this doesn't select th elements or headings in thead or tfoot. You could copy the two selectors to read "th", but if you can trust the integrity of your markup to not have anything but th and td inside a tr and tr only in thead, tfoot, or tbody (the only valid possibilities); you could do something like this:

table.foo > * > tr > :first-class + *, /* column 2 */
table.foo > * > tr > :first-class + * + * + * /* column 4 */
{display: none;}

This works fine in browsers newer than IE6, generally, which is almost always acceptable.


If IE6 support is mandatory -- and be utterly sure it is before bothering to go down this road -- a combination of valid CSS2/3 and Javascript in a conditional comment is the simplest solution (avoid using Javascript for layout when the job doesn't require it).

Anonymous
Best solution yet!
Jonny Haynes
A: 

Tanks to everybody, I had to use jquery, I could not find how to do that from pure CSS2 , IE doesn't support CSS3 :(

Alexander Corotchi