My tr border override the table border

Question

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?

Answer 1

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/

Answer 2

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/

Answer 3

Update the table css like the following

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

You can check the Demo