Nicer Tables (rounded Corners, Hover Highlight, Even/Odd coloring, Header coloring)

Post date: Sep 21, 2017 5:36:8 PM

• • No JavaScript or images 

  • No extra padding in the corders

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>