CODEWITHSUNDEEP
jquerycsshtml-table
User
User

Reputation: 1662

Highlighting the row in html table?

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

Answers (2)

Jo&#227;o Mosmann
Jo&#227;o Mosmann

Reputation: 2902

in the table tag, define this attributes

cellspacing="0"

Upvotes: 0

Wouter Spaak
Wouter Spaak

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

Related Questions