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
  • #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?

    Kitty Giraudel

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


    Code in my previous comment got all messed up so putting it in again:

    table {
    margin: 10px 0px 10px 0px;}
    background: #1958A2}
    th {
    background: #4C4D4F;
    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;}


    Seriously, can you not put it in Codepen?

    Here…this might help.


    I am sorry I am new to this forum and web development.

    Anyhow, here is it:

    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.


    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:


    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.


    How do i do that?


    None of that worked. :(


    table {
    border-collapse: collapse;


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