css.tble-info { border: 1px solid #ddd; border-collapse: separate; border-left: 0; border-radius: 4px; border-spacing: 0px; margin-top: 5%; } .tble-info thead { display: table-header-group; vertical-align: middle; border-color: inherit; border-collapse: separate; } .tble-info tr { display: table-row; vertical-align: inherit; border-color: inherit; background-color: #fbfbfb; } .tble-info th, .tble-info td { padding: 5px 4px 6px 4px; text-align: left; vertical-align: top; border-left: 1px solid #ddd; } .tble-info th { background-color: #4CAF50; color: white; } .tble-info td { border-top: 1px solid #ddd; } .tble-info thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { border-radius: 4px 0 0 0; } .tble-info thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child { border-radius: 0 0 0 4px; } .tble-info tr:nth-child(even) { background-color: #f2f2f2; } .tble-info tr:hover { background-color: #ddd; } html<table class="tble-info"> <thead> <tr> <th>Added on</th> <th>Asset Tag</th> <th>Service Tag</th> <th>Building</th> <th>Mac Address</th> </tr> </thead> <tbody> <tr> <td>2017-09-21 11:01:57</td><td>H15890</td><td>2JH12H2</td><td>BOE</td><td>00H1F8CC846D</td> </tr> <tr> <td>2017-09-21 13:18:04</td><td>H15891</td><td>2JH1H1</td><td>MHS</td><td>0028F8CH1161</td> </tr> <tr> <td>2017-09-21 13:18:35</td><td>H15892</td><td>2JNH1H3</td><td>BHS</td><td>00H118CC8463</td> </tr> </tbody> </table> |
css >