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>