Membuat Table Modern dengan CSS - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Membuat Table Modern dengan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Bootstrap, Artikel Web Design, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Table Modern dengan CSS
link : Membuat Table Modern dengan CSS

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..^_^

Demikianlah Artikel Membuat Table Modern dengan CSS

Sekianlah artikel Membuat Table Modern dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Table Modern dengan CSS dengan alamat link http://jendeladuniainternet.blogspot.com/2015/12/membuat-table-modern-dengan-css.html

Tweet