CODEWITHSUNDEEP
cssbordercss-tables
Syl
Syl

Reputation: 3829

My tr border override the table border

I have the following CSS for my table :

table{
  border: 1px solid black;
  border-collapse: collapse;
}

tr{
    border-bottom: 1px solid #a2a2a2;
  }

I want my table to have a black border and inside, the line are supposed to be separated by a grey border. However the bottom border of the table is overridden by tr and is grey instead of black.

How can I manage to give the priority to the table border against the tr border?

Upvotes: 6

Views: 8555

Answers (4)

spring
spring

Reputation: 770

Update the table css like the following

table, tr:last-child
{
  border: 1px solid black;
  border-collapse: collapse;
}

You can check the Demo

Upvotes: 1

Spudley
Spudley

Reputation: 168655

Move your bottom border to the top for the tr, and set the first tr to have no border:

table{
  border: 1px solid black;
  border-collapse: collapse;
}

tr{
    border-top: 1px solid #a2a2a2;
}

tr:first-child{
    border:none;
}

jsFiddle to demonstrate it working (with slightly modified border colours and sizes to help them show up better in the demo)

Note that this solution involves slightly more CSS code than other valid solutions, but has the advantage of better browser compatibility. (:first-child is CSS2, whereas :last-child is CSS3)

[EDIT]

As per OP's comment below: To prevent the cell borders bleeding into the table border, we need to do the following:

  • Remove the border-collapse:collapse. This is what is making the borders combine together causing the bleeding effect.

  • Put the inner borders on the cells (td) rather than the rows (tr). This is necessary because without border-collapse, we can't have borders on the tr.

  • Add border-spacing:0 to the table. This closes up the gaps between the td elements, which would show up now because the border is on them rather than the tr.

Here's the finished code:

table{
  border: 4px solid blue;
  border-spacing:0;
}

td{
    border-top: 4px solid red;
}

tr:first-child>td{
    border:none;
}

And here's an updated version of the fiddle: http://jsfiddle.net/T5TGN/2/

Upvotes: 9

Chubby Boy
Chubby Boy

Reputation: 31062

use :not(:last-child)

table{
 border: 1px solid black;
 border-collapse: collapse;
}

tr:not(:last-child){
 border-bottom: 1px solid #a2a2a2;
}

Please see this: http://jsfiddle.net/JSWorld/QmuA9/1/

Upvotes: 5

Correia JPV
Correia JPV

Reputation: 610

try adding padding-bottom to the tr:

tr{
    border-bottom: 1px solid #a2a2a2;
    padding-bottom: 1px;
  }

Upvotes: 0

Related Questions