Question

我正在尝试在文本左侧添加边框，这样当我悬停行时，第一个单元格的边框会突出显示，并且用户知道它们在哪一行。

以下是我目前所拥有的fiddle：

#table {
  border: 1px solid#e9e9e9;
}
tr:hover {
  background-color: #e9e9e9;
}
tr:hover > td:first-child {
  border-left: 2px solid #1B8645;
}

<table id="table">
    <tr>
        <th>Status</th>
        <th>Price</th>
        <th>Address</th>
    </tr>

	<tbody>
        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>

        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>

        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>

        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>

        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>
    </tbody>
</table>

然而，正如小提琴中所见，当我将鼠标悬停在行上时，文字被推了一下，使得悬停看起来凌乱而扭曲。我试图设置一条线，当悬停时，文本不应被推开，表格内容不应移动。

以下是悬停时边框的应用方式：

tr:hover >  td:first-child {
    border-left: 2px solid #1B8645;
}

Answer 1

你应该为无悬停状态添加透明色线

tr>td:first-child{
    border-left: 2px solid transparent;
}

http://jsfiddle.net/serGlazkov/eq70r3zb/1/

Answer 2

边框将按原样将文本推向右侧。如果可能的话，当你发生悬停时，你是否尝试使用负边距（margin-left：-2px）向左移动文本？或者在这种情况下添加一些填充（2px），而不是在悬停时将其带走。

悬停时向表格单元格添加左边框

2 个答案: