-->
6/Tutorial/slider
Showing posts with label CSS. Show all posts

Row Hover pada Tabel dengan CSS

No comments
Tutorial kali ini adalah tentang menghias tabel dengan css. Namun di artikel kali ini dikhususkan pada bagian row hover.
Apa maksudnya? Jadi begini, sebenernya masalah ini baru saja saya alami..

Saya buat tabel seperti biasa, dan hasil yang saya inginkan adalah ketika kursor mengarah ke salah satu record, maka seluruh record dalam row (baris) tersebut background-color nya berubah.. Namun yang saya dapatkan justru hanya satu record (dalam tag "td") saja yang berubah warna backgroundnya.
Lalu saya coba pada cssnya dengan menggunakan parameter:
tr:hover {background:#kodewarna}


Namun parameter di atas justru tidak menghasilkan apa - apa.. Setelah dicoba diulik akhirnya berhasil juga dengan script berikut:
tr:hover td {background:#kodewarna}


Jadi contoh script selengkapnya seperti berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Row Hover pada Tabel dengan CSS</title>
</head>

<body>

<table id="rowhover">
<tr><th>Tabel Header 1</th><th>Tabel Header 2</th><th>Tabel Header 3</th></tr>
<tr><td>Record Baris Pertama</td><td>Record Baris Pertama</td><td>Record Baris Pertama</td></tr>
<tr><td>Record Baris Kedua</td><td>Record Baris Kedua</td><td>Record Baris Kedua</td></tr>
<tr><td>Record Baris Ketiga</td><td>Record Baris Ketiga</td><td>Record Baris Ketiga</td></tr>
<tr><td>Record Baris Keempat</td><td>Record Baris Keempat</td><td>Record Baris Keempat</td></tr>
</table>

<style type="text/css">
#rowhover {font-family:Arial, Helvetica, sans-serif; text-align:left; font-size:12px; line-height:1.4em; padding:4px; margin:0px; border:1px solid #999; border-collapse:collapse; border-spacing:0px;}
#rowhover th {background:#999; padding:10px; color:#000;}
#rowhover td {padding:10px; text-align:left;}
#rowhover tr:hover td {background:#CCCCCC;}
</style>

</body>
</html>


Download source code : disini

Jadi seperti itulah tips membuat hover pada satu baris dengan css.. Jika ingin tampilan lebih cantik silahkan di edit saja css-nya..
An ENTJ Person. A software engineer, experienced in web development, especially in Java. The best graduate of engineering field of Bandung State Polytechnic. Self-motivated and adaptable person. Highly passionate about IT stuff. A fast learner, always curious and loves to learn something new. Has a strong logical and analytical thinking. [Faris Arifiansyah] (https://lh4.googleusercontent.com/9-OcR6PfTb9wECGLmzP0uzrFor9GiXdbMHRt_eXiIh9D_kdopGPGDogIuhWVlCaeBfGONpDMz54MuZHfm98s=w1920-h925)