Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Table CSS Help Needed

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #40871

    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?

    #114706
    Kitty Giraudel
    Participant

    Without any code, we won’t be able to help. Please, drop a few lines on CodePen of JSFiddle.

    #114712
    Paulie_D
    Member
    #114736

    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;}

    #114740
    Paulie_D
    Member

    Seriously, can you not put it in Codepen?

    Here…this might help.
    http://codepen.io/Paulie-D/pen/yLmAs

    #114741

    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.

    #114744
    Paulie_D
    Member

    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

    #114755

    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

    #114761
    Paulie_D
    Member

    My guess is that’s two borders combining.

    #114764

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

    #114768

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

    #114772

    How do i do that?

    #114797

    ^^
    None of that worked. :(

    #114799
    uetzicle
    Member

    table {
    border-collapse: collapse;
    }

    #114800

    ^Didnt work. It also removes the border between cells.

Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘CSS’ is closed to new topics and replies.