SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems styling table borders

    Hi.
    I want to change the color bottom border of tr elements.
    I tried to apply border-color:#aaa; but it doesn´t change anything. Still a white border.

    What i am doing wrong?

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    try giving value in 6 characters like

    #aaaaff

    or

    Code:
    border:1px solid #aaaaff;
    or post your code

    vineet

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Popovich88 View Post
    Hi.
    I want to change the color bottom border of tr elements.
    Note that TR elements can only have borders in the collapsing borders model (border-collapse:collapse). If you haven't set this property, you can't have row borders at all.

    Quote Originally Posted by Popovich88 View Post
    I tried to apply border-color:#aaa; but it doesn´t change anything. Still a white border.
    We need to see the whole CSS rule. Are you specifying a rule for row borders? Or do you have borders only for the cells?

    Code CSS:
    tr {border:1px solid white; border-bottom-color:#aaa}
    This should work.

    Quote Originally Posted by vinpkl View Post
    try giving value in 6 characters
    Completely unnecessary. 3-digit colour values are perfectly valid CSS and are understood by all CSS-capable browsers.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works if i set the border to all table but if i try to set borders for rows still a white border.

    Here is my css:
    For example i want to set a border bottom of thead element:
    Code CSS:
    table.generic
    {
       width:530px;
       overflow: scroll;
       margin:0 auto;
       border:1px solid #cccccc; /* This works */
    }
     
    table.generic thead
    {
        font-size: 12px;
        background-color: #c0c0c0;   
    }
     
    table.generic thead tr
    {
       border:3px solid #aaaaff; /* Dont work*/
    }
     
    table.generic thead th
    {
        border:3px solid #aaaaff; /*Works*/
    }
    }

    My html:

    Code HTML4Strict:
    <table class="generic tablesorter">
            <thead>
                <tr>
                    <th>...</th>
                    <th>...</th>
                    <th>...</th>
                    <th>...</th>
                </tr>
            </thead>
            <tbody>
                 ...
            </tbody>
     
    </table>


    I still have a white border between cells.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But you are not setting border-collapse:collapse, which I said you have to do if you want to set borders for table rows.

    What you are seeing is not borders, but the space between the rows cause by the separate borders model.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well setting cellspacing=0 seems to work but are any better way using css?

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes:

    setting border-collapse:collapse

    Why don't you read the replies you are getting? I have told you three times already.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    But you are not setting border-collapse:collapse, which I said you have to do if you want to set borders for table rows.

    What you are seeing is not borders, but the space between the rows cause by the separate borders model.
    Sorry i havent seen your post before my reply.
    You post when i was writing my responses

    I will try it.


    PS:
    Now it works

    Many thanks and sorry again for not seeing your replies.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Popo: it happens. I miss answers all the time : )

    Vineet: I think there were browsers who did not understand the hex shortcuts... I remember hearing about them. But none of the modern browsers and even the older ones like Ie5 have issues with it. We can safely use 3-digit shortcuts everywhere.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Note that IE6 and IE7 do not allow you to style borders on the tr element. You would have to style the bottom border on all the td in a row instead.


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
  •