- This topic is empty.
-
AuthorPosts
-
November 19, 2012 at 3:55 am #40871Historical Forums UserParticipant
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?
November 19, 2012 at 3:58 am #114706Kitty GiraudelParticipantWithout any code, we won’t be able to help. Please, drop a few lines on CodePen of JSFiddle.
November 19, 2012 at 5:01 am #114712Paulie_DMemberIn any case, th ONLY relates to cells inside a tr in a thead
You might want to look at:
https://css-tricks.com/video-screencasts/61-basic-table-styling/
and
https://css-tricks.com/video-screencasts/66-table-styling-2-fixed-header-and-highlighting/
November 19, 2012 at 10:16 am #114736Historical Forums UserParticipantCode in my previous comment got all messed up so putting it in again:
table {
margin: 10px 0px 10px 0px;}
thead{
background: #1958A2}
th {
background: #4C4D4F;
color:white;
padding: 5px 5px 5px 5px;
font-size: 11px;}
tr {
background: #DDD;
padding: 5px 5px 5px 5px;
text-align: center;}
td {
background: #DDD;
text-align: center;
padding: 5px 5px 5px 5px;}November 19, 2012 at 10:53 am #114740Paulie_DMemberSeriously, can you not put it in Codepen?
Here…this might help.
http://codepen.io/Paulie-D/pen/yLmAsNovember 19, 2012 at 11:20 am #114741Historical Forums UserParticipantI 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.
November 19, 2012 at 11:32 am #114744Paulie_DMemberYou 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.
November 19, 2012 at 12:46 pm #114755Historical Forums UserParticipantOk 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
November 19, 2012 at 1:03 pm #114761Paulie_DMemberMy guess is that’s two borders combining.
November 19, 2012 at 1:25 pm #114764Historical Forums UserParticipantThat could be the reason, how can i get rid of that?
November 19, 2012 at 1:39 pm #114768Historical Forums UserParticipantAlright. I just tested and its not the border. I did border-bottom:0 for thead but that didnt fix.
November 19, 2012 at 2:12 pm #114772Historical Forums UserParticipantHow do i do that?
November 19, 2012 at 4:02 pm #114797Historical Forums UserParticipant^^
None of that worked. :(November 19, 2012 at 4:15 pm #114799uetzicleMembertable {
border-collapse: collapse;
}November 19, 2012 at 4:37 pm #114800Historical Forums UserParticipant^Didnt work. It also removes the border between cells.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.