HTML/CSS：如何增加边框大小而不影响高度

Question

我有一个表格，每列都有1像素的底部边框。当鼠标悬停在行上时，我想将边框设置为2像素，如下例所示：

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像素。

我能否增加边框大小而不影响高度？

- ar099968

---

为什么你不希望边框增加行的高度呢？无论如何，边框都需要以某种方式扩展。 - Barrosy

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>

- Temani Afif

Answer 2

您可以减少底部填充，这将减小td的高度，但不会影响td的高度。

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

tr:hover td {
   border-bottom: 2px solid red;
   padding-bottom: 0px;**strong text**
}

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

- Maajid Siddiqui

Answer 3

你可以使用outline来实现相同的效果，但是outline适用于整个元素。

所以你可以使用box-shadow在一侧创建一个轮廓。就像outline一样，box-shadow不会改变盒模型的大小。

tr td {
  box-shadow: 0 -1px 0 #000 inset;
}

tr:hover td {
  box-shadow: 0 -2px 0 #f00 inset;
}

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

- sibasishm

Answer 4

你可以使用box-shadow来创建类似边框的样式，而不会影响元素的高度。

- skalta

Answer 5

你也可以尝试设置一个特定的高度，并设置box-sizing:border-box

tr td {
  border-bottom: 1px solid grey;
  height:30px;
  box-sizing:border-box;
}

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>

- FBR

Answer 6

当你增加尺寸时，你的线条会变得更高（因为它的新边框）。 如果你只想增加高度而不改变线条的尺寸，请按如下方式操作：

tr:hover td { border-bottom: 2px solid red; height: 上一个高度 - 1 }

- sari

---

计算，然而，在CSS中是无法实现的对吧？所以这将需要使用JavaScript来解决。 - Barrosy