HTML/CSS : increase border size without affect the height

Question

我有一个表格，每列的底部边框为 1px。在行悬停时我想将边框设置为 2px，请参见示例:

tr td {
  border-bottom: 1px solid grey;
}

tr:hover td {
   border-bottom: 2px solid red;
}

<table>
  <tr><td>foo</td><td>bar</td></tr>
  <tr><td>foo</td><td>bar</td></tr>
</table>

悬停时，该行的高度增加并将下一行向下移动 1 像素。

我可以在不影响高度的情况下增加边框大小吗？

Answer 1

像下面这样尝试 border-image:

tr td {
  border-bottom: 2px solid transparent;
  border-image:linear-gradient(to top,grey 1px,transparent 0) 2;
}

tr:hover td {
  border-image:linear-gradient(to top,red 2px,transparent 0) 2;
}

<table>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</table>

或者和背景一样的渐变:

tr td {
  padding-bottom:2px;
  background:linear-gradient(to top,grey 1px,transparent 0);
}

tr:hover td {
  background:linear-gradient(to top,red 2px,transparent 0);
}

<table>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</table>