我试图在文本的左边添加一个边框,这样当我悬停行时,第一个单元格的边框会突出显示,用户知道它们在哪一行.
这是我到目前为止的fiddle:
#table {
border: 1px solid#e9e9e9;
}
tr:hover {
background-color: #e9e9e9;
}
tr:hover > td:first-child {
border-left: 2px solid #1B8645;
}
Status | Price | Address |
---|---|---|
Active | 8742 | 5476235street |
Active | 8742 | 5476235street |
Active | 8742 | 5476235street |
Active | 8742 | 5476235street |
Active | 8742 | 5476235street |
然而,正如小提琴中所见,当我将鼠标悬停在行上时,文本被推了一下,使得悬停看起来凌乱而扭曲.我试图以这样的方式设置一条线,当悬停时,文本不应被推开,表格内容不应移动.
以下是悬停时边框的应用方式:
tr:hover > td:first-child {
border-left: 2px solid #1B8645;
}