Reputation: 1662
I use the following programs for create the highlighting the row in mouse over event it was working fine, but my problem is if mouse over the particular row the whitespace are occurring in between the highlighting bar? How to remove the whitespace?
Table Creation:
<table border="0" id="TabDeclaration" width="100%" cellpadding="5" cellspacing="3" border="2">
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>azaz</td>
</tr>
<tr>
<td>cccc</td>
<td>dddd</td>
</tr>
<tr>
<td>eeee</td>
<td>ffff</td>
</tr>
</table>
jQuery for call css:
$('#TabDeclaration tr').mouseover(function() {
if($.trim($(this).text()) != '')
$(this).addClass('hovered');
}).mouseout(function() {
$(this).removeClass('hovered');
});
Css:
.hovered td {
background: #ddd;
}
Upvotes: 1
Views: 334
Reputation: 2902
in the table tag, define this attributes
cellspacing="0"
Upvotes: 0
Reputation: 221
Why would you go about using javascript? It'd be far easier to just use the css :hover
selector.
HTML:
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>azaz</td>
</tr>
<tr>
<td>cccc</td>
<td>dddd</td>
</tr>
<tr>
<td>eeee</td>
<td>ffff</td>
</tr>
CSS:
tr:hover {
background: #ddd;
}
This should work just fine, when the mouse hovers on the table row. the :hover
selector works on any HTML element, not just <a>
tags.
Upvotes: 4