Membuat Hover Data Table dengan CSS3

Hallo teman-teman, Berjumpa lagi dengan saya di website ini. Dan dihari yang cerah ini semoga teman-teman masih diberikan kesehatan, agar dapat lebih banyak dalam mencari informasi.

Di artikel ini saya akan memberikan tutorial tentang cara Membuat Hover Data Table dengan CSS3. Untuk sebagai gambaran saya ceritakan sedikit, jadi seperti ini, didalam sebuah website ada table dimana table tsb isinya adalah sebuah data nah didalam sebuah data yang banyak tsb kita hanya perlu mengarahkan cursor mouse ke salah satu data yang ada didalam table tsb. Maka otomatis table tsb akan menghover salah satu data yang tersentuh oleh si cursor mouse. Jadi seperti itulah gambarannya.

Oke agar teman-teman lebih memahaminya mari kita mulai mempraktekannya ya, pertama-tama seperti biasa siapkan text editor yang teman-teman gunakan kemudian ketik script HTML nya seperti dibawah ini :

<table class="highlight-table">
    <tr>
      <th>Nama</th>
      <th>Tugas</th>
      <th>UTS</th>
      <th>UAS</th>
      <th>PRAKTEK</th>
      <th>GRADE</th>
    </tr>
    <tr>
      <th>Rizal</th>
      <td>85</td>
      <td>80</td>
      <td>90</td>
      <td>95</td>
      <td>A</td>
    </tr>
    <tr>
      <th>Murihat</th>
      <td>80</td>
      <td>80</td>
      <td>75</td>
      <td>85</td>
      <td>B</td>
    </tr>
    <tr>
     <th>Hidayat</th>
      <td>85</td>
      <td>80</td>
      <td>90</td>
      <td>70</td>
      <td>B+</td>
    </tr>
    <tr>
      <th>Sukirman</th>
      <td>70</td>
      <td>80</td>
      <td>75</td>
      <td>85</td>
      <td>B-</td>
    </tr>
</table>

Jika sudah simpan file HTML nya, lalu langkah selanjutnya teman-teman ketik script CSS nya seperti dibawah ini :

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: Open Sans, sans-serif;
  font-size: 13px;
  margin: 20px;
  text-align: center;
  text-transform: uppercase;
  color: #000;
}

h1 {
  font-size: 21px;
  margin: 1.5em 0;
}

table.highlight-table {
  overflow: hidden;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  border-spacing: 0;
}
table.highlight-table td,
table.highlight-table th {
  padding: 10px;
  position: relative;
  outline: 0;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: top;
}
table.highlight-table th {
  font-weight: bold;
}
table.highlight-table thead th {
  border-bottom-width: 2px;
}
table.highlight-table tbody th {
  text-align: left;
  white-space: nowrap;
}
table.highlight-table tbody > tr:hover td,
table.highlight-table tbody > tr:hover th {
  background: #fffe96;
}
table.highlight-table td:hover:after,
table.highlight-table thead th:not(:empty):hover:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -5000px;
  left: 0;
  width: 100%;
  height: 10000px;
  background: #fffe96;
}

Jika sudah simpan script CSS nya. Dan langkah selanjutnya jika teman-teman menggunakan css external maka teman-teman harus menghubungkan antara file html nya dengan file cssnya. Dan jika teman-teman menggunakan css internal maka hanya tinggal menjalankan/run dibrowser yang teman-teman gunakan. Kalau sudah berhasil maka hasilnya akan seperti pada gambar dibawah ini :

Oke jika hasilnya sudah seperti pada gambar diatas maka teman-teman telah berhasil dalam Membuat Hover Data Table dengan CSS3.

Cukup sekian pembahasan kali ini tentang cara Membuat Hover Data Table dengan CSS3, semoga dapat bermanfaat bagi teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

The post Membuat Hover Data Table dengan CSS3 appeared first on Kursus Website Terbaik.