マウスオーバーでテーブル行の色を変更

デモ

HTML

<table id="hover-table"> <tr> <th>ヘッダ</th> <td>データ</td> <th>ヘッダ</th> <td>データ</td> </tr> <tr> <th>ヘッダ</th> <td>データ</td> <th>ヘッダ</th> <td>データ</td> </tr> </table> <table id="hover-table2"> <tr> <th>ヘッダ</th> <td>データ</td> <th>ヘッダ</th> <td>データ</td> </tr> <tr> <th>ヘッダ</th> <td>データ</td> <th>ヘッダ</th> <td>データ</td> </tr> </table>

CSS

table{ margin-bottom:10px; border-left:1px solid #333333; border-top:1px solid #333333; } body #demo table th, body #demo table td{ padding:3px 6px; border-right:1px solid #333333; border-bottom:1px solid #333333; color:#000000; } th{ background-color:#dddddd; } td{ background-color:#ffffff; }