Code to hove the table rows and column- Tryit Editor for Web Developers
Edit This Code:
See Result »
<html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 13px; text-align: left; border-bottom: 3px solid blue; } tr:hover {background-color:red;} </style> </head> <body> <h1>Welcome To CSS</h1> <h2>Hoverable Table:</h2> <p><b>Move the mouse over the table rows to see the effect...</b></p> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Score</th> <th>Score</th> <th>Score</th> <th>Score</th> <th>Score</th> </tr> <tr> <td>Ali</td> <td>Sajid</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>Asad</td> <td>Arshad</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> </tr> <tr> <td>Nadir</td> <td>Shahid</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> </tr> <tr> <td>Sadia</td> <td>Kiran</td> <td>87</td> <td>87</td> <td>87</td> <td>87</td> <td>87</td> </tr> </table> </body> </html>
Result:
