Remove border overlap on stacked tr elements using CSS

Question

I have two <tr> elements with different color borders. The appearance is visable in the attached picture. How can I make it so they each have their own border or in other words have the lower blue one show it's upper border as well? Preferably with css.

To do that, target the `td` elements inside. – Chris Riebschlager Jan 17 '18 at 23:30 — Chris Riebschlager, Jan 17 '18 at 23:30

score 0 · Answer 1 · answered Jan 17 '18 at 23:42

Adding borders to tr elements is kind of problematic. You should target your styles to the td elements inside.

JSFiddle: https://jsfiddle.net/72pg7xry/

table {
    border-spacing: 0;
}

tr.blue td  {
  border-top: 5px solid blue;
  border-bottom: 5px solid blue;
}

tr.blue td:first-child {
  border-left: 5px solid blue;
}

tr.blue td:last-child {
  border-right: 5px solid blue;
}

tr.green td {
  border-top: 5px solid green;
  border-bottom: 5px solid green;
}

tr.green td:first-child {
  border-left: 5px solid green;
}

tr.green td:last-child {
  border-right: 5px solid green;
}

Here's more info on why styling tr is tricky: Add border-bottom to table row <tr>

this didn't actually help, same effect. – Zachscs Jan 18 '18 at 00:33 — Zachscs, Jan 18 '18 at 00:33

Remove border overlap on stacked tr elements using CSS

1 Answers1