Question

I have a table with some tabular data:

When I hover with the mouse over the row it displays me a magnifier glass next to the name.

The problem with this approach is that the content (Anderson) moves to right and therefore the neighbouring td (First Name) also gets pushed to the right side. It is annoying since everything starts dancing to the right and then left when hovering over the rows.

<td><i id="glass" class="icon-search icon-large"></i>Anderson</td>
<td>Michael</td>

.cb_table-hover tbody tr .icon-search{
    display: none;
}    

.cb_table-hover tbody tr:hover .icon-search{
    display: inline-block;
}

I tried to position the icon to the left, but it doesn’t help the situation:

#glass{
    position:relative;
    left: -10px;
}

I could always introduce just a td for the icon to secure its fixed position in the table, but I wonder if there is a better way of doing this. Thanks

Answer 1

Change CSS property with this:

.cb_table-hover tbody tr .icon-search{
    visibility: hidden;
}

.cb_table-hover tbody tr:hover .icon-search{
    visibility: visible;
}

Visibility property hides the element, but does not hide the space it occupies.