Grow your CSS skills. Land your dream job.

Table CSS Help Needed

  • # November 19, 2012 at 3:55 am

    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

    Without 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

    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/

    # November 19, 2012 at 10:16 am

    Code 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

    Seriously, can you not put it in Codepen?

    Here…this might help.

    http://codepen.io/Paulie-D/pen/yLmAs

    # November 19, 2012 at 11:20 am

    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.

    # November 19, 2012 at 11:32 am

    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

    # November 19, 2012 at 12:46 pm

    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

    # November 19, 2012 at 1:03 pm

    My guess is that’s two borders combining.

    # November 19, 2012 at 1:25 pm

    That could be the reason, how can i get rid of that?

    # November 19, 2012 at 1:39 pm

    Alright. I just tested and its not the border. I did border-bottom:0 for thead but that didnt fix.

    # November 19, 2012 at 2:08 pm

    Cell spacing needs to be disabled in the HTML, that should fit it.

    # November 19, 2012 at 2:12 pm

    How do i do that?

    # November 19, 2012 at 2:33 pm

    < 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.

    # November 19, 2012 at 4:02 pm

    ^^
    None of that worked. :(

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".