• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

[CSS] Some table help.

Question

Axel    95

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/

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0
Seahorsepip    610

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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
Axel    95

No one?

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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.

Share this post


Link to post
Share on other sites
  • 0
Axel    95

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.

Share this post


Link to post
Share on other sites
  • 0
Axel    95

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.