Membuat Table Modern dengan CSS

Membuat Table Modern dengan CSS - Halo gengs, lagi sibuk apa hari ini ?, Juragan mau bagi snippet table cantik nih, bergaya flat dan dan modern, cocok banget buat kamu yang selalu pengne tampil kekinian ..

Sebenernya style yang Juragan bikin mirip dengan bootstrap, namun Juragan percantik sedikit, oke deh langsung saja yak...

HTML

<table class="flat-table flat-table-3">
 <thead>
  <th>Nama Barang</th>
  <th>Pemesan</th>
  <th>Tujuan</th>
  <th>Ekspedisi</th>
 </thead>
 <tbody>
  <tr>
   <td>UPS</td>
   <td>Ahok</td>
   <td>Jakarta</td>
   <td>Tiki</td>
  </tr>
  <tr>
   <td>USB</td>
   <td>Jokowi</td>
   <td>Solo</td>
   <td>JNE</td>
  </tr>
  <tr>
   <td>Mouse</td>
   <td>Ridwan Kamil</td>
   <td>Bandung</td>
   <td>JNE</td>
  </tr>
 </tbody>

CSS

.flat-table {
  margin-bottom: 20px;
  border-collapse:collapse;
  font-family: 'Lato', Calibri, Arial, sans-serif;
  border: none;
                border-radius: 3px;
               -webkit-border-radius: 3px;
               -moz-border-radius: 3px;
 }
 .flat-table th, .flat-table td {
  box-shadow: inset 0 -1px rgba(0,0,0,0.25), 
   inset 0 1px rgba(0,0,0,0.25);
 }
 .flat-table th {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  padding: 1em;
  color: rgba(0,0,0,0.45);
  text-shadow: 0 0 1px rgba(0,0,0,0.1);
  font-size: 1.5em;
 }
 .flat-table td {
  color: #f7f7f7;
  padding: 0.7em 1em 0.7em 1.15em;
  text-shadow: 0 0 1px rgba(255,255,255,0.1);
  font-size: 1.4em;
 }
 .flat-table tr {
  -webkit-transition: background 0.3s, box-shadow 0.3s;
  -moz-transition: background 0.3s, box-shadow 0.3s;
  transition: background 0.3s, box-shadow 0.3s;
 }
 .flat-table-3 {
  background: #52be7f;
 }
 .flat-table-3 tr:hover {
  background: rgba(0,0,0,0.1);
 }

Oke Geng, Sekian dulu yak..^_^