[CSS] Some table help.

[Axel]

Hi all,

 

I'm trying to make a table which has alternating borders across the columns.  Now I can do this with the following code:

 

.slot:nth-child(even) {border-left: 1px dashed #ddd;}
.slot:nth-child(odd) {border-left: none;}

 

This works fine until you add "colspan" to the mix.  With colspan, unfortunately the sequence is knocks out completely and it doesn't look right.

 

No matter I thought, I'd specifiy the left borders for only the .1z .3z .5z classes etc.  Trouble is it's not affecting them at all.  Each cell has a class of .slot aswell as a second class which denotes it's position during the day.If i change the rule for .slot it affects everything but if i change rules for 1z, etc. It does nothing?

 

Very puzzled.

 

You can see my attempts at the CSS on lines 18 through 29.

 

Many thanks.

 

http://jsfiddle.net/ZQSZ2/

[Seahorsepip Veteran]

Found the issue already, you used the classes: 1z, 2z, 3z etc which will not work.

Make sure to start the classes with a letter so as example: s1z, s2z, s3z, s4z etc.

[Axel]

No one?

[Seahorsepip Veteran]

Any chance on a mockup in PS or such what you actually want?, since the description isn't quite clear to me.

 

Edit: I understand the problem already, lemme look into it.

[Axel]

  On 20/04/2014 at 13:41, Seahorsepip said:

Any chance on a mockup in PS or such what you actually want?, since the description isn't quite clear to me.

 

I spose this example makes it a bit clearer:

 

http://jsfiddle.net/xY4H2/2/

 

Notice that each alternating cell has a red border on it's left.  However, when you introduce rowspan into the mix, it knocks it all out of sync.  You can see this on the third row.  I've acheived this by using nth-child(odd) and (even).

 

As this doesn't seem to work I then tried to just asign each individual class that was odd. i.e. 1z 3z 4z etc it's own properties with the respect to border-left.  However, clearly my css knowledge isn't up to scratch as I cant seem to get that selector to do anything!

 

See my attempts at this method on line 27 of the css (commented out).

 

Hope this makes sense.

 

Many thanks.

[Axel]

  On 20/04/2014 at 13:59, Seahorsepip said:

Found the issue already, you used the classes: 1z, 2z, 3z etc which will not work.

Make sure to start the classes with a letter so as example: s1z, s2z, s3z, s4z etc.

 

Ah so I can't use a number at the beginning of a class or ID.  That's brilliant, solved my issue. Thanks very much!