徘徊时向表格单元格添加左边框 [英] Adding a left border to a table cell when hovered

问题描述

我试图在文本左侧添加一个边框，以便当我将该行悬停时，第一个单元格的边框会突出显示，并且用户知道它们位于哪个行中。

以下是我迄今为止的小提琴：

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

 < table id =table> < TR> <的第i;状态< /第> <的第i;价格< /第> <第>地址< /第> < / TR> < TBODY> < TR> < TD>有活性的LT; / TD> < TD> 8742< / TD> < TD> 5476235street< / TD> < / TR> < TR> < TD>有活性的LT; / TD> < TD> 8742< / TD> < TD> 5476235street< / TD> < / TR> < TR> < TD>有活性的LT; / TD> < TD> 8742< / TD> < TD> 5476235street< / TD> < / TR> < TR> < TD>有活性的LT; / TD> < TD> 8742< / TD> < TD> 5476235street< / TD> < / TR> < TR> < TD>有活性的LT; / TD> < TD> 8742< / TD> < TD> 5476235street< / TD> < / TR> < / tbody>< / table>  

在小提琴中看到，当我将鼠标悬停在行上时，文本被推动了一下，并使悬停看起来杂乱和扭曲。我试图设置一条线，以便在悬停时不应将文本推开，并且表内容不应移动。

这里是如何将边框应用于悬停：

  tr：悬停> td：第一个孩子{
 border-left：2px solid＃1B8645; 
} 
  

解决方案

line for no hover status

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

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

I'm trying to add a border to the left of the text in such a way that when I hover the row, the border of the first cell gets highlighted and the user knows which row they're in.

Here is a fiddle of what I have so far:

#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>

However, as seen in the fiddle, when I hover the row, the text is pushed a bit and makes the hover look messy and distorted. I'm trying to set a line in such a way that when hovered, the text shouldn't be pushed away and the table content shouldn't move.

Here is how the border is applied on hover:

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

解决方案

you should add a transparent color line for no hover status

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

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

这篇关于徘徊时向表格单元格添加左边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！