html - a: リンクが td ボックス全体を埋めていない

Question

テーブルがあり、すべてのセルをクリックできるようにしたいと考えていました。これは多少機能しますが、リンクがボックス全体を埋めていないようです。これは、誰かが端に近すぎるクリックのホバー効果を適用すると問題になります。これを修正する方法はありますか？

これは私のcssです

.dashboardMods td a {
  display: block;
  height:100%;
  width:100%;
}

.dashboardMods td:hover{
  background-color:#4297c2;
}

リンクがボックスに入力されていません

score 0 · Accepted Answer

おそらくパディングがあり、パディングが両側にあるため.dashboardMods td、内側の要素が大きくなるのを防ぎます。width - (padding * 2)

また、height: 100%ブラウザや HTML の仕様 (quirksmode) によっては、常に機能するとは限りません。

score 0 · Accepted Answer

から削除paddingし<td>ます。代わりに、同じパディングをに追加して<a>、同様の効果を得ることができます。確かに.dashboardMods a:hover、bg を変更する代わりに行うこともできます。

score 0 · Accepted Answer

これを試して：

.dashboardMods td{
  padding:0;
}
.dashboardMods td a{
  display: block;
  height:100%;
  width:100%;
  padding:0;
  margin:0;
  line-height:100%;
}

3 に答える 3