html - 边框增加 1px

Question

我需要在表格中实现行选择，但是当我将 border: 1px; 设置为整行时，它设置在左侧的表格内，但在右侧是 1px 外面。

现在有人知道怎么把它放在 table 里面吗？

谢谢!

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>