reactjs 悬停时突出显示表格中的边框

2cmtqfgy 于 12个月前发布在 React

关注(0)|答案(1)|浏览(125)

我想在悬停时突出显示表格行边界。像这样：

的数据
我尝试添加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？

reactjs

来源：https://stackoverflow.com/questions/77757541/highlight-border-in-table-on-hovering

1条答案

按热度按时间

omqzjyyz1#

设置两个CSS变量--color-border: #888;和--color-border-hover: #fff;
巧妙地设置表格单元格元素的边框。关注border-top，仅在最后一行的TD上设置border-bottom
只有:first-child和:last-child TH和TD应该设置左/右边框。
最后，在tbody tr:hover上，只需将--color-border:的值设置为var(--color-border-hover);

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font: 1rem/1.4 sans-serif;
  background-color: #181818;
  color: #eee;
}

table {
  --color-border: #888;
  --color-border-hover: #fff;
  margin: 1rem auto;
  border-spacing: 0;
  th,
  td {
    text-align: left;
    padding: 1rem 2rem;
    border-top: 1px solid var(--color-border);
  }
  thead {
    th {
      &:first-child {
        border-radius: 10px 0 0 0;
        border-left: 1px solid var(--color-border);
      }
      &:last-child {
        border-radius: 0 10px 0 0;
        border-right: 1px solid var(--color-border);
      }
    }
  }
  tbody {
    td {
      transition: background-color 0.26s, border-color 0.26s;
      &:first-child {
        border-left: 1px solid var(--color-border);
      }
      &:last-child {
        border-right: 1px solid var(--color-border);
      }
    }
    tr:last-child {
      td {
        border-bottom: 1px solid var(--color-border);
      }
    }
    tr:hover {
      --color-border: var(--color-border-hover);
      td {
        background-color: hsla(0 100% 100% / 0.1);
      }
      &+tr td {
        border-top-color: var(--color-border-hover);
      }
    }
  }
}

个字符

赞(0）回复(0）举报 12个月前

我来回答

reactjs 悬停时突出显示表格中的边框

1条答案

相关问题

热门标签

最新问答