I've been working on adding a left border to the text in a way that highlights the first cell's border when hovering over a row, providing a clear indication of the current row for users.
Feel free to check out my progress so far on this 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>However, I noticed that in the fiddle, when I hover over the row, the text shifts slightly and creates a messy appearance. I want to implement a border that doesn't disrupt the text positioning during hover and keeps the table content stable.
This is how the hover effect with the border is currently set up:
tr:hover > td:first-child {
border-left: 2px solid #1B8645;
}