Question

编辑

更清楚地说，以下是我要实现的目标。

我正在尝试创建一个表格，其中的每一行都有一个半径为像素的像素边框（模仿折叠的边框样式）。将鼠标悬停在一行上后，我希望所选行的边框可以更改颜色。我几乎可以通过以下代码实现此目的，但是将鼠标悬停在一行上时，下一行下降1像素以为悬停边框留出空间。

table {
    border-collapse: separate;
    border-spacing: 0;
}

td {
    border: solid 1px black;
    border-style: solid none;
    padding: 10px;
    border-bottom: 0;
}

td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

tr:last-child td {
    border-bottom: solid 1px black;
}

tr:hover {
    /*background-color: #cad6ed;*/
}

tr:hover td {
    border: 1px solid #12A0F8;
    border-style: solid none;
    padding: 10px;
}

tr:hover td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

tr:hover td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

<table>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
</table>

有更好的方法吗？

非常感谢。

Answer 1

更新了更好的解决方案

不知道为什么我从一开始就没有解决核心问题，但是您的主要问题是下面的项目被压低了，您可以定位下一个项目并将边框顶部设置为无

tr:hover + tr td {
    border-top: none;
}

其余原始代码保持不变

table {
    border-collapse: separate;
    border-spacing: 0;
}

td {
    border: solid 1px black;
    border-style: solid none;
    padding: 10px;
    border-bottom: 0;
}

tr:hover + tr td {
    border-top: none;
}

td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

tr:last-child td {
    border-bottom: solid 1px black;
}

tr:hover {
    /*background-color: #cad6ed;*/
}

tr:hover td {
    border: 1px solid #12A0F8;
    border-style: solid none;
    padding: 10px;
}

tr:hover td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

tr:hover td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

<table>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
  <tr>
    <td>One</td><td>Two dfds</td><td>Three</td>
  </tr>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
</table>

旧答案

您可以通过将tr设置为显示块来实现。我使用margin-top -1px来隐藏额外的边框。为简化起见，我从td中删除了边框，然后将其放在tr上，因为无论如何在tds之间都没有边框

悬停时的z索引使带有边框的悬停项目弹出

我在所有tr上都设置了负边距，但是第一个，您可能会在所有tr上都取消它

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  padding: 10px;
}

tr {
  border-radius: 10px;
  border: 1px solid #000;
  display: block;
  box-sizing: border-box;
  position: relative;
}

tr:not(:first-child) {
  margin-top: -1px;
}

tr:hover {
  z-index: 2;
  border: 1px solid blue;
}

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

Answer 2

编辑：包括CSS var()并更新HTML标记以包括该变量。

您需要在悬停时删除border-width属性，而只需使用border-color，还需要重叠tr元素，以使边框看起来是一个像素。

我已经更新了答案，以使用z-index和负top值。请注意，这仅适用于三个tr元素，如果您需要动态解决方案，则可以根据生成表的方式来更新答案。

table {
  border-collapse: separate;
  border-spacing: 0;
}

tr {
  position: relative;
  z-index: 1;
  top: var(--rowCount);
}

td {
  border: solid 1px black;
  border-style: solid none;
  padding: 10px;
}

td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

tr:last-child td {
  border-bottom: solid 1px black;
}

tr:hover {
  /*background-color: #cad6ed;*/
  z-index: 5;
}

tr:hover td {
  border-color: #12A0F8;
  border-style: solid none;
  padding: 10px;
}

tr:hover td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

tr:hover td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

<table>
  <tr style="--rowCount: 0px">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr style="--rowCount: -1px">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr style="--rowCount: -2px">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr style="--rowCount: -3px">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

https://jsfiddle.net/disinfor/nhp3o8xw/31/

Answer 3

删除下边框：0；在td标签中

table {
  border-collapse: separate;
  border-spacing: 0;
  z-index:0;
}

td {
  border: solid 1px black;
  border-style: solid none;
  padding: 10px;
  border-bottom: 0;
}

td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

tr:last-child td {
  border-bottom: solid 1px black;
}

tr:hover td{
  border-color: #12A0F8;
  border-bottom: solid 1px #12A0F8;
  padding-bottom: 9px;
}

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

悬停时更改表格边框

编辑

3 个答案: