Membuat Hover Data Table dengan CSS3

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

Di artikel ini saya akan memberikan panduan mengenai cara Merancang Hover Data Table dengan CSS3. Bagi selaku ilustrasi saya ceritakan sedikit, jadi seperti ini, didalam sebuah laman ada table dimana table tsb isinya yaitu sebuah data nah didalam sebuah data yang banyak tsb kita hanya perlu mengarahkan cursor mouse ke diantara data yang terdapat didalam table tsb. Karenanya otomatis table tsb akan menghover diantara data yang tersentuh oleh si cursor mouse. Jadi seperti seperti itulah gambarannya.

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

<table class=highlight-table>
    <tr>
      <th>Nama</th>
      <th>Fungsi</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>

Bila telah simpan file HTML nya, lalu langkah berikutnya 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;
}

Bila telah simpan script CSS nya. Dan langkah berikutnya seandainya teman-teman menggunakan css external karenanya teman-teman mesti menghubungkan antara file html nya dengan file cssnya. Dan seandainya teman-teman menggunakan css internal karenanya hanya tinggal menjalankan/run dibrowser yang teman-teman gunakan. Kalau telah berhasil karenanya hasilnya akan seperti di gambar dibawah ini :

Oke seandainya hasilnya telah seperti di gambar diatas karenanya teman-teman telah berhasil pada Merancang Hover Data Table dengan CSS3.

Lumayan sekianlah pembahasan kali ini mengenai cara Merancang Hover Data Table dengan CSS3, semoga dapat bermanfaat untuk teman-teman dan hingga bertemu dipembahasan berikutnya.

Terimakasih

Sumber https://kursuswebsite.org