HTML CSS examples for CSS Widget:Table Border
Fancy border to highlight table header
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> table {<!-- w w w . j a va 2 s.co m--> width:100%; } table thead { font-weight:bold; } table thead td { margin-right:6px; border-collapse:separate; border-spacing:11px 6px; } table thead td hr { width:81%; margin:0 11px 0 0; border-bottom:3px solid Chartreuse; } table tbody { font-size:91%; } table tbody tr { line-height:3em; border-bottom:2px solid yellow; } table tbody td { padding:0 6px; } </style> </head> <body> <table> <thead> <tr> <td>Lorem ip <hr> </td> <td>Lorem <hr> </td> <td>Lorem ips <hr> </td> </tr> </thead> <tbody> <tr> <td>Lorem </td> <td>Lorem ip</td> <td>Lorem ipsum dolor si</td> </tr> <tr> <td>Lorem </td> <td>Lorem ip</td> <td>Lorem ipsum dolor si</td> </tr> <tr> <td>Lorem </td> <td>Lorem ip</td> <td>Lorem ipsum dolor si</td> </tr> <tr> <td>Lorem </td> <td>Lorem ip</td> <td>Lorem ipsum dolor si</td> </tr> <tr> <td>Lorem </td> <td>Lorem ip</td> <td>Lorem ipsum dolor si</td> </tr> <tr> <td>Lorem </td> <td>Lorem ip</td> <td>Lorem ipsum dolor si</td> </tr> </tbody> </table> </body> </html>