css‎ > ‎

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

posted Sep 21, 2017, 10:36 AM by Chris Franklin   [ updated Sep 21, 2017, 10:39 AM ]

  • 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>



Comments