I am writing CSS for tables for my WordPress website and I am coming across this issue. My 'th' is dark grey and 'td' is light gray. These are the characteristics for 'tbody'. Now, for 'thead' i want to have different color for 'th' How do it write that?
Though there is one issue, when same css is applied on my site, all the cells show up with some white border (which i want) but Codepen doesnt show it.
Anyhow, what I want to do is have blue color for anything in thead without using any class or id as i'll be using these tables repeatedly and putting classes everytime in HTML isnt practical.
However, you need to make sure that everything that is meant to be in the thead is actualy in there, then it's just a case of making sure your CSS is specific enough.
Ok now everything is fine. One little issue. There is some space between the thead and tbody. It isnt showing in the CodePen but its showing up when i implement this on site. See here: http://i.imgur.com/ZASmG.png
I am writing CSS for tables for my WordPress website and I am coming across this issue. My 'th' is dark grey and 'td' is light gray. These are the characteristics for 'tbody'. Now, for 'thead' i want to have different color for 'th' How do it write that?
Without any code, we won't be able to help. Please, drop a few lines on CodePen of JSFiddle.
In any case, th ONLY relates to cells inside a tr in a thead
You might want to look at:
http://css-tricks.com/video-screencasts/61-basic-table-styling/
and
http://css-tricks.com/video-screencasts/66-table-styling-2-fixed-header-and-highlighting/
Code in my previous comment got all messed up so putting it in again:
Seriously, can you not put it in Codepen?
Here...this might help. http://codepen.io/Paulie-D/pen/yLmAs
I am sorry I am new to this forum and web development.
Anyhow, here is it: http://codepen.io/anon/pen/vouqw
Though there is one issue, when same css is applied on my site, all the cells show up with some white border (which i want) but Codepen doesnt show it.
Anyhow, what I want to do is have blue color for anything in thead without using any class or id as i'll be using these tables repeatedly and putting classes everytime in HTML isnt practical.
You have a few unclosed declarations in there.
However, you need to make sure that everything that is meant to be in the thead is actualy in there, then it's just a case of making sure your CSS is specific enough.
http://codepen.io/Paulie-D/pen/GvKto
Ok now everything is fine. One little issue. There is some space between the thead and tbody. It isnt showing in the CodePen but its showing up when i implement this on site. See here: http://i.imgur.com/ZASmG.png
My guess is that's two borders combining.
That could be the reason, how can i get rid of that?
Alright. I just tested and its not the border. I did border-bottom:0 for thead but that didnt fix.
Cell spacing needs to be disabled in the HTML, that should fit it.
How do i do that?
< table cellspacing="0" border="0" cellpadding="0" >
You could also try adding it to the tr/td's as well.
*remove the spaces before/after the <> those are just in because the code thing on here is playing up.
^^ None of that worked. :(
^Didnt work. It also removes the border between cells.
http://codepen.io/Paulie-D/pen/GvKto