Hey there, I am facing an issue with a table I have. In each row (TR), the last TD element has a class called 'abs'. The style for this class is specified in the provided code snippet.
Initially, this element is hidden. However, when you hover over the row (TR), I use jQuery to display it by applying the style 'display: block'.
$("tr").hover(function() {
$(this).find(".abs").show();
},
function() {
$(this).find(".abs").hide();
});.abs {
display: none;
position: absolute;
margin-left: 100px;
background: #fff;
margin-top: -40px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br /><br /><br /><br />
<table>
<tr>
<td>123</td>
<td class="abs">456</td>
</tr>
</table>However, I am encountering an issue specifically in Chrome where when the TD.abs is shown on hover, it creates an empty space at the end of the row which is not desirable. Interestingly, Firefox does not exhibit this behavior and works fine.
Can someone guide me on how to address this problem specifically for Chrome?