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 https://jendeladuniainternet.blogspot.com/2015/12/membuat-table-modern-dengan-css.html
0 Response to "Membuat Table Modern dengan CSS"
Posting Komentar