桌子行之间的空间悬停

Question

我正在构建一个表格，我希望在悬停时突出显示给定的行。但是，我希望悬停空间比行的高度短。 图片预览。这是Sketch文件的打印屏幕。您可以看到白色边框与悬停空间相距一定距离。甚至可以创建这样的东西吗？

到目前为止，我试图使边框间距更大，但我也得到了列之间的空间，这不是理想的结果。

Answer 1

尝试这样的事情：

check_output

tr{
    background: grey;
    padding: 10px;
}

.hover {
  padding : 5px;
  margin : 5px;
  cursor: pointer;
  border-radius: 10px;
}

.hover:hover {
   background : lightblue;
   color: darkblue;
   
}

Answer 2

您可以尝试使用：border-collapse:separate;和border-spacing

table {
    width: 100%;
    border-collapse:separate; 
    border-spacing: 0 3px;
}

table {
    width: 100%;
    border-collapse:separate; 
    border-spacing: 0 3px;
}

td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:hover {
  background: red;
  border-radius: 5px;
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
   </tbody>
</table>

表行不能有边距或填充值，也不能使用border-radius或其他转换它们的属性。