CODEWITHSUNDEEP
htmlcss
Wicked Sick
Wicked Sick

Reputation: 43

How to create hover effect in html table using css?

i tried creating a hover effect using css, where if the user hovers through the table's rows, it will change the background-color to red. But i notice when i hover the rows, instead of filling up the whole row with red, it fills up only the individual cells.

Here is my code:

.GridviewScrollHeader TH,
.GridviewScrollHeader TD {
  padding: 5px;
  font-weight: bold;
  white-space: nowrap;
  border-right: 1px solid #AAAAAA;
  border-bottom: 1px solid #AAAAAA;
  background-color: #EFEFEF;
  vertical-align: bottom;
  text-align: left;
}

.GridviewScrollItem TD {
  padding: 5px;
  white-space: nowrap;
  border-right: 1px solid #AAAAAA;
  border-bottom: 1px solid #AAAAAA;
  background-color: #FFFFFF;
}

.GridviewScrollItem TD:hover {
  background-color: red;
}
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>
    Test
  </title>

  <link href="GridviewScroll.css" rel="stylesheet" />
  <style type="text/css">
    BODY,
    TD {
      font-family: Tahoma, Arial, Verdana;
      font-weight: normal;
      font-size: 12px;
      color: #333333;
    }
  </style>
</head>

<body>
  <table cellspacing="0" id="GridView1" style="width:100%;border-
    collapse:collapse;">
    <tr class="GridviewScrollHeader">
      <td colspan="2">Product</td>
      <td rowspan="2">ListPrice</td>
      <td rowspan="2">StandardCost</td>
      <td colspan="2">Package</td>
      <td rowspan="2">SafetyStockLevel</td>
      <td rowspan="2">ReorderPoint</td>
      <td rowspan="2">SellStartDate</td>
    </tr>
    <tr class="GridviewScrollHeader">
      <td>Name</td>
      <td>Number</td>
      <td>Weight</td>
      <td>Size</td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>HL Mountain Frame - Black, 38</td>
      <td>FR-M94B-38</td>
      <td>1349.6000</td>
      <td>739.0410</td>
      <td>2.68</td>
      <td>38</td>
      <td>500</td>
      <td>375</td>
      <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>HL Mountain Frame - Silver, 38</td>
      <td>FR-M94S-38</td>
      <td>1364.5000</td>
      <td>747.2002</td>
      <td>2.68</td>
      <td>38</td>
      <td>500</td>
      <td>375</td>
      <td>7/1/2005 12:00:00 AM</td>
    </tr>
  </table>

</body>

</html>

Upvotes: 4

Views: 2766

Answers (4)

Matthias Seifert
Matthias Seifert

Reputation: 2073

That happens, because you set the Hover Effect only to the td elements, not the whole row. If you remove the td from your css and only apply the hover to the tr Elements, it works.

Note: You have to remove the specific background color of the td Elements, because they would override the tr:hover effect. Please take a look at the working snippet below.

.GridviewScrollHeader th, .GridviewScrollHeader td {
    padding: 5px;
    font-weight: bold;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #EFEFEF;
    vertical-align: bottom;
    text-align: left;
}

.GridviewScrollItem TD {
    padding: 5px;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
}

.GridviewScrollItem {
  background: #fff;
}

.GridviewScrollItem:hover {
    background-color: red;
}
<table cellspacing="0" id="GridView1" style="width:100%;border-
collapse:collapse;">
    <tr class="GridviewScrollHeader">
        <td colspan="2">Product</td>
        <td rowspan="2">ListPrice</td>
        <td rowspan="2">StandardCost</td>
        <td colspan="2">Package</td>
        <td rowspan="2">SafetyStockLevel</td>
        <td rowspan="2">ReorderPoint</td>
        <td rowspan="2">SellStartDate</td>
    </tr>
    <tr class="GridviewScrollHeader">
        <td>Name</td>
        <td>Number</td>
        <td>Weight</td>
        <td>Size</td>
    </tr>
    <tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Black, 38</td>
        <td>FR-M94B-38</td>
        <td>1349.6000</td>
        <td>739.0410</td>
        <td>2.68</td>
        <td>38</td>
        <td>500</td>
        <td>375</td>
        <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Silver, 38</td>
        <td>FR-M94S-38</td>
        <td>1364.5000</td>
        <td>747.2002</td>
        <td>2.68</td>
        <td>38</td>
        <td>500</td>
        <td>375</td>
        <td>7/1/2005 12:00:00 AM</td>
    </tr>
</table>

Upvotes: 1

bhansa
bhansa

Reputation: 7504

You just need to put the hover to whole table row means your tr, now you have only to your td

Just add hover to your row:

.GridviewScrollItem:hover {
    background-color: red;
}


.GridviewScrollHeader th, .GridviewScrollHeader td {
    padding: 5px;
    font-weight: bold;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #EFEFEF;
    vertical-align: bottom;
    text-align: left;
}

.GridviewScrollItem TD {
    padding: 5px;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
}

.GridviewScrollItem {
  background: #fff;
}

.GridviewScrollItem:hover {
    background-color: red;
}
<table cellspacing="0" id="GridView1" style="width:100%;border-
collapse:collapse;">
    <tr class="GridviewScrollHeader">
        <td colspan="2">Product</td>
        <td rowspan="2">ListPrice</td>
        <td rowspan="2">StandardCost</td>
        <td colspan="2">Package</td>
        <td rowspan="2">SafetyStockLevel</td>
        <td rowspan="2">ReorderPoint</td>
        <td rowspan="2">SellStartDate</td>
    </tr>
    <tr class="GridviewScrollHeader">
        <td>Name</td>
        <td>Number</td>
        <td>Weight</td>
        <td>Size</td>
    </tr>
    <tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Black, 38</td>
        <td>FR-M94B-38</td>
        <td>1349.6000</td>
        <td>739.0410</td>
        <td>2.68</td>
        <td>38</td>
        <td>500</td>
        <td>375</td>
        <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Silver, 38</td>
        <td>FR-M94S-38</td>
        <td>1364.5000</td>
        <td>747.2002</td>
        <td>2.68</td>
        <td>38</td>
        <td>500</td>
        <td>375</td>
        <td>7/1/2005 12:00:00 AM</td>
    </tr>
</table>

Upvotes: 0

Nathan
Nathan

Reputation: 43

What I tried is different and may have some issues but I cant say I didnt try I do see better results from others :)

CSS:

.GridviewScrollHeader TH, .GridviewScrollHeader TD{
    padding: 5px;
    font-weight: bold;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #EFEFEF;
    vertical-align: bottom;
    text-align: left;
}

.GridviewScrollItem TD{
    padding: 5px;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #FFFFFF;
}

/* The :nth-child() Does not work on some versions of IE 
removing it will only let you highlight other fields there on until the end of the "td" 
just add overflow-x:hidden if you remove the nth child and make the table full screen width by setting body margin to 0*/

.GridviewScrollItem TD:nth-child(1):hover{
    background-color: red;
    width:98.4%; /* If you ever Change the margins make sure to change this accordingly */ /* full screen is 100% but take note of margins */
    position:absolute;
    opacity:0.5; /* Does not work in IE9 or less */ /* Check for other opacity attributes for older IE Browsers */
    font-weight:bold; /* To Darken text to still be visable */
}

The HTML hasn't changed and it does seem to rely on opacity but this is my results some of you may disagree.

Upvotes: 0

Heshankit
Heshankit

Reputation: 113

Change your hovering css to below code.

.GridviewScrollItem:hover TD
{
    background-color: red;
}

Please check this EXAMPLE

Upvotes: 1

Related Questions