<tr> граница добавляет дополнительно 1 пиксель

Question

Мне нужно реализовать выбор строки в таблице, но когда я устанавливаю border: 1px; для всей строки, она устанавливается внутри таблицы слева, а справа - 1px снаружи.

Кто-нибудь теперь, как сделать это внутри стола тоже?

Спасибо!

table {
  margin: 10px;
  border-collapse: collapse;
}

tr {
  background: lime;
}

tr:first-child + tr {
    border:1px solid red;
}

td {
  padding: 2px 5px;
}

<table>
    <tr><td>item1</td><td>item2</td></tr>
    <tr><td>item3</td><td>item4</td></tr>
    <tr><td>item5</td><td>item6</td></tr>
</table>

Answer 1

Используйте box-shadow с inset

table {
  margin: 10px;
  border-collapse: collapse;
}

tr {
  background: lime;
}

tr:first-child + tr {
    box-shadow: 0 0 0 2px red inset;
}

td {
  padding: 2px 5px;
}

<table>
    <tr><td>item1</td><td>item2</td></tr>
    <tr><td>item3</td><td>item4</td></tr>
    <tr><td>item5</td><td>item6</td></tr>
</table>