HTML CSS examples for CSS Widget:Table Header
Hover to highlight table header
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> table.patientinfo { width:100%; display:block; height:501px; overflow-y:scroll; } table.patientinfo:after { content:" ";<!--from www .ja v a 2 s .c o m--> background:orange; position:absolute; top:0; left:0; bottom:0; width:18px; z-index:-2; } table.patientinfo th { vertical-align:middle; width:181px; height:27px; border-bottom:2px solid Chartreuse; border-top:2px solid yellow; border-right:2px solid blue; background-image:-ms-linear-gradient(bottom, pink 0%, OrangeRed 100%); background-image:-moz-linear-gradient(bottom, grey 0%, BlueViolet 100%); background-image:-o-linear-gradient(bottom, Chartreuse 0%, yellow 100%); background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, blue), color-stop(2, pink)); background-image:-webkit-linear-gradient(bottom, OrangeRed 0%, grey 100%); background-image:linear-gradient(to top, BlueViolet 0%, Chartreuse 100%); margin:0 auto; position:relative; } table.patientinfo th.small { width:51px; border-right:2px solid yellow; } table.patientinfo th:hover { cursor:pointer; background:blue; } table.patientinfo tr:hover { cursor:pointer; border-bottom:2px solid pink; } table.patientinfo td { height:31px; text-align:center; } table.patientinfo tr { border-bottom:2px solid OrangeRed; } .primarykey { background:grey; } </style> </head> <body> <table class="patientinfo"> <tbody> <tr> <th class="small"> </th> <th>Lorem ip</th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> </tr> <tr> <td class="primarykey">L</td> <td>Lorem </td> <td>Lore</td> <td>Lor</td> <td>Lorem ipsum dolor</td> <td>Lorem ipsum dolo</td> <td>Lor</td> </tr> <tr> <td class="primarykey">L</td> <td>Lorem </td> <td>Lorem </td> <td>Lore</td> <td>Lorem ipsum dolor</td> <td>Lorem ipsum dolo</td> <td>Lor</td> </tr> </tbody> </table> </body> </html>