如何实现Ant Design表格行悬停时仅高亮行边界而非列间线条？

问题描述 #

我希望实现Ant Design表格的行在鼠标悬停时，仅高亮行的上下边界（效果为行的上下边框变明显，列间线条无变化）。我尝试了以下CSS代码：

.ant-table-tbody>tr.ant-table-row:hover>td, .ant-table-tbody>tr>td.ant-table-cell-row-hover{ 
    background: #fafafa; 
    color: #091E42 
} 
.theme-dark .ant-table-tbody>tr.ant-table-row:hover>td, .ant-table-tbody>tr>td.ant-table-cell-row-hover{ 
    background:#242424; 
    color: #fff; 
    border: 1px solid #CDD6E0 !important; 
}

但目前效果出现了列间线条也被高亮的问题，请问如何编写正确的CSS来实现需求？

解决方案 #

要实现仅高亮行的上下边界，需要只设置td元素的上下边框样式，同时重置左右边框为表格默认样式，避免列间线条被修改。修改后的CSS代码如下：

浅色主题样式 #

.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover {
  background: #fafafa;
  color: #091E42;
  /* 仅设置上下边框高亮，左右边框继承表格默认样式 */
  border-top: 1px solid #CDD6E0 !important;
  border-bottom: 1px solid #CDD6E0 !important;
  border-left: inherit !important;
  border-right: inherit !important;
}

深色主题样式 #

.theme-dark .ant-table-tbody > tr.ant-table-row:hover > td,
.theme-dark .ant-table-tbody > tr > td.ant-table-cell-row-hover {
  background: #242424;
  color: #fff;
  /* 仅设置上下边框高亮，左右边框继承表格默认样式 */
  border-top: 1px solid #CDD6E0 !important;
  border-bottom: 1px solid #CDD6E0 !important;
  border-left: inherit !important;
  border-right: inherit !important;
}

关键说明 #

• 替换原代码中border: 1px solid #CDD6E0 !important的写法，单独指定border-top和border-bottom，避免一次性修改所有边框导致列间线条被高亮。
• 用border-left: inherit !important和border-right: inherit !important强制继承表格默认的列间边框样式，确保悬停时列间线条保持原有状态。
• 如果你的表格默认列间边框有特定样式，也可以直接将border-left和border-right设置为对应的值（比如border-left: 1px solid #e8e8e8），适配表格的原始设计。

内容的提问来源于stack exchange，提问作者Naina Garg