HTML CSS examples for CSS Widget:Table Row
Hover at table row level
<html lang="en"> <head> <title>Lorem ipsum d</title> <style> .GridViewScrollHeader TH, .GridViewScrollHeader TD { padding:11px; font-weight:normal; white-space:nowrap;<!--from w w w .ja va 2s .c o m--> border-right:2px solid Chartreuse; border-bottom:2px solid yellow; background-color:blue; color:pink; text-align:left; vertical-align:bottom; cursor:default; } .GridViewScrollItem TD { padding:11px; white-space:nowrap; border-right:2px solid OrangeRed; border-bottom:2px solid grey; color:BlueViolet; background-color:Chartreuse; } .GridViewScrollItem TR { background-color:yellow; } .GridViewScrollItem:hover td { background-color:blue; cursor:pointer; } </style> </head> <body translate="no"> <table cellspacing="0" id="gvMain2" style="width: 100%; border-collapse: collapse;"> <tbody> <tr class="GridViewScrollHeader"> <th>Lorem ipsum </th> <th>Lorem ips</th> <th>Lorem ipsum dolo</th> <th>Lorem ipsum d</th> <th>Lorem ipsum</th> <th>Lorem ipsum </th> <th>Lorem ips</th> <th>Lore</th> <th>Lorem </th> <th>Lorem ipsum </th> <th>Lorem </th> </tr> <tr class="GridViewScrollItem"> <td>Lor</td> <td>Lorem ipsum dolor sit amet, c</td> <td>Lorem ipsu</td> <td>Lor</td> <td>Lore</td> <td>Lorem ip</td> <td>Lorem ips</td> <td>Lor</td> <td>Lorem ipsum dolor si</td> <td> </td> <td>Lorem ipsum dolor sit</td> </tr> </tbody> </table> </body> </html>