Problems styling table borders

HTML & CSS
1

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

try giving value in 6 characters like

#aaaaff

or


border:1px solid #aaaaff;

or post your code

vineet

3

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.

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?

tr {border:1px solid white; border-bottom-color:#aaa}

This should work.

Completely unnecessary. 3-digit colour values are perfectly valid CSS and are understood by all CSS-capable browsers.

4

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:

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:

<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

But you are not setting border-collapse:collapse, which I said you have to do if you want to set borders for table rows. :rolleyes:

What you are seeing is not borders, but the space between the rows cause by the separate borders model.

6

Well setting cellspacing=0 seems to work but are any better way using css?

7

Yes:

setting border-collapse:collapse

Why don’t you read the replies you are getting? I have told you three times already. :rolleyes:

8

Sorry i havent seen your post before my reply.:rolleyes:
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

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

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.