CSSでテーブルのセルが、a:hover で背景を変わるようにしましたが、枠がちらついてしまいます。

質問

テーブルのセルに、リンクのあるテキストをはって、
a:hoverで背景が変わるようにしたのですが、
hoverの状態でセルの外側だけ背景が変わらずに、hover状態でないときの背景がほんの少しちらついてしまいます。

table .a{border: 0px;background-color:red;;padding: 2px;width: 150px;}
table .a a:hover{border:0px;padding: 2px;width: 150px;background-color:orange;}
のようにすると、
hover状態で、セルの枠が、ほんの少しredのままになってしまいます。
http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
の 3.BOX　の例のように、hover状態できれいに背景の色が変わるようにしたいんですが、どう直せばいいでしょうか。よろしくおねがいいたします。

回答No.1

yambejp · ベストアンサー

とりあえずこんな感じでどうでしょう

<style>
table .a{border: 0px;background-color:red;;padding: 0px;width: 150px;}
table .a a{display:block;border:0px;padding: 2px;width: 150px;}
table .a a:hover{background-color:orange;}
</style>
<table>
<tr>
<td class="a"><a href="#">test</a></td>
</tr>
</table>

お礼

迅速なご回答ありがとうございます。大変たすかります。きれいに枠が消えました。
.aのpadding を0にして、
.a a{diplay:block;padding:2px;}にするということでしょうか。
.aのときのpaddingが0になると、セルの中のテキストが詰まってしまうんですが、これも同時に改善するにはどうすればよいのでしょうか。
.aのpaddingを2pxにすると、hover状態の枠が復活してしまいます。
アホですいません。

補足

なんどもすいません。
重ねて質問したいのですが、Operaで見た場合に、テキスト部分だけhover状態で背景が変わり、セル中のテキストが無い部分は

IE7で見るとセル全体がリンクになるんですが、Operaの場合リンク部分はセル全体でなくて、テキスト部分のみになってしまうんですが、これはどうすれば改善できるのでしょうか。
お時間がありましたらこちらもお答えいただけると大変たすかります。

回答No.2

yambejp

.aのクラスはアンカーにつけてもよいですか？
そうであればこんな感じで・・・

<style>
table .a{border: 0px;background-color:red;;padding: 0px;width: 150px;}
table a.a{display:block;border:0px;padding: 4px;width: 150px;}
table a.a:hover{background-color:orange;}
</style>
<table>
<tr>
<td><a href="#" class="a">test</a></td>
</tr>
</table>

お礼

お返事遅くなりました。
勉強になります。ありがとうございました。