SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    specificity issue in styling a table

    I thought I had a handle on specificity, but now I am having an issue that I think I may be. I am trying to style a table. I have all cells with a background, but I want to change the first column to another background.
    If I get rid of the background in <tr> it works.
    my tableI only posted a small amount)
    Code:
    <table>
    <colgroup>
        <col class="column1" />
        <col class="tablecol2" />
        </colgroup>
    
                    <tr>
       <th scope="col">Lead</th>
       <th>1</th>
       <th>2</th>
       <th>3</th>
       <th>4</th></tr>
       <tr><td>title</td><td>this</td><td>that</td><td>the other</td></tr>
    CSS:
    Code:
    th {
        background: url(../images/bg_th.jpg) no-repeat right;
        height: 47px;
        color: #FFFFFF;
        font-size: 0.8em;
        font-weight: bold;
        padding: 0px 7px;
        margin: 20px 0px 0px;
        text-align: left;
        border-right: 1px solid #FCF1D4;
    }
    .column1 {
        background-color: #fff9ec;
    }
    
    tbody tr {
    background: url(../images/bg_td1.jpg) repeat-x top;
    }
    tbody tr.odd {
        background: #FFF8E8 url(../images/bg_td2.jpg) repeat-x;
    }
    
    tbody th,td {
        font-size: 0.8em;
        line-height: 1.4em;
        font-family: Arial, Helvetica, sans-serif;
        color: #777777;
        padding: 5px 7px;
        border-top: 1px solid #FFCA5E;
        border-right: 1px solid #DDDDDD;
        text-align: left;
    }

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem here is that row backgrounds are rendered on top of column backgrounds (see Table layers and transparency).

    You'll need to set the backgrounds of the cells, to achieve what you want.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank You.
    I decided to change the column to <th> instead of <td>
    I am glad I know that for next time... thanks for the reading material.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •