Question

我看过之前提出的类似问题并没有发现这是相同的。我想在悬停时创建行边框，并分别为行中的第一个和最后一个单元格添加了带左右边框的css。

我的HTML：

<table>
  <tr><td>1111111</td><td>22222222</td><td>3333333333</td></tr>
  <tr><td>4444444</td><td>55555555</td><td>6666666666</td></tr>
  <tr><td>7777777</td><td>88888888</td><td>9999999999</td></tr>
</table>

我的css：

table {
  border-collapse: seperate; 
  border-spacing:0;
}
tr:hover td {
  border-top: 1px groove #E8E8E8;
  border-bottom: 1px groove #E8E8E8;
}
tr:hover td:first-child {
  border-left: 1px groove #E8E8E8;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
tr:hover td:last-child {
  border-right: 1px groove #E8E8E8;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

但是添加边框半径会使端部的单元格边框变亮。我在Border radius changes color

为它创建了一个JSFiddle

我一直在使用Chrome 55，它改变了第一个和最后一个单元格的颜色，但仅限于顶部。使用Safari 10可以更改底部和顶部边框的颜色。

Answer 1

我不太确定，但似乎是一些不稳定的抗锯齿，通过在1px使用凹槽而恶化。使用2px的凹槽或固定的1px似乎可以修复它，尽管它仍然会在侧面稍微减少。这是故意还是不想要的？

Answer 2

试试这个css代码

    table {
border-collapse: seperate; 
border-spacing:0;
}
tr:hover td {
  border-top: 1px groove #E8E8E8;
  border-bottom: 2px groove #E8E8E8;
}
tr:hover td:first-child {
  border-left: 1px groove #E8E8E8;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
tr:hover td:last-child {
  border-right: 2px groove #E8E8E8;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

将右边框和右边框宽度更改为2像素

添加边框半径属性会更改边框的颜色

2 个答案: