CSSでリンクを枠の中いっぱいに広げたいです。

Question

###■やりたいこと
表の中のリンクの範囲を、表の枠いっぱいに、そしてぴったりに広げたいです。

###■困ってます
このように書くと、なぜかズレます。
リンクの範囲は枠と同じ大きさなのですが、枠とぴったりにならずズレるのです！
https://jsfiddle.net/zxp5kb42/

.waku {
  position: relative;
}
.waku a {
  position: absolute;
  width: 100%;
  height: 100%;
}

###■ためしたこと
このように書いてみました。
すると上記のようなズレは起きず、枠と同じ大きさでぴったりに広がってくれます。
が、今度はリンクの文字が枠の真ん中に来てくれません！！
vartical-alignを書いてもダメな様子です。
https://jsfiddle.net/zxp5kb42/2/

.waku {
  position: relative;
}
.waku a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  vertical-align:middle;  
}

以上です。

どうずればリンクの文字が枠いっぱいにぴったりに広がって、そして枠の真ん中に来てくれるのでしょうか？

よろしくお願いいたします。

Comments

[m.ts10806]

１つ目のリンク先のリンクURLの後ろに何か記号が入っているようです。修正お願いします。

[退会済みユーザー]

ご指摘ありがとうございます。修正いたしました！

Answer 1

「クリックエリアをセルいっぱいにしたい」だけなら下記の手段もあります。

.waku {
  position: relative;
}
.waku a::after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
```**動くサンプル：**[https://jsfiddle.net/zxp5kb42/11/](https://jsfiddle.net/zxp5kb42/11/)

Comments

[退会済みユーザー]

これは！すごいですね！
同じ行の他の枠にpaddingがあっても、この方法なら平気なのですね！
ズレもなし。最高です。
どうもありがとうございます。

Answer 2

こんな感じでどうでしょう。

td.waku{
 padding:0;  
}
td.waku a {
  width: 100%;
  height: 100%;
  display:block;
  padding:10px;
}

aが枠いっぱいにならないのは下記２点が原因と思われます。

• tdにpaddingがついているため
• というのとaがブロック化されていないため

tdからの距離はaをブロック化した上でaにpaddingを与えて距離をとっています。
上記指定では右にもはみ出てしまいますが（background-colorつけてみてください）
上下左のみで調整しても良いと思います。

forkソース

https://jsfiddle.net/a1btnL1u/3/

Comments

[退会済みユーザー]

おはようございます。
試しました。ありがとうございます。横幅はほぼ解決ですね。
しかし…
縦が埋まってくれなそうなのですが、これってなんとかならないものでしょうか？(*´Д｀)

１つ目のリンク範囲が大きく右下にズレるのも謎ですよね…表には使えないのでしょうか？

[m.ts10806]

あれ？横も縦もちゃんと表の範囲に広がってるはずなのですが・・・。
forkしたものを貼っておきます。。

分かりやすくするためにaのpaddingを２０pxに広げてます。

[m.ts10806]

ただ、これだけだと文字に下線がついててそこしか押せないというUXになるので、
下線消して.waku aに背景色つけたり、ちょっとボタンぽく装飾した方が見た目にも機能的にも良いですね。

[退会済みユーザー]

失礼いたしました！
.test tdにpadding:10px;を書いたままでした。（ちゃんと読めw）
その分の縦が埋まってくれなかったようです。

たびたびのご回答、まことにありがとうございます。
今日も暑いのでマメな水分補給を☆

[退会済みユーザー]

そうですね。この枠は比較表でして、左の「問題の部分」は名前だけです。表の右側にその名前へのリンク先としてかわいいボタンをつけようかなと思っております。

[退会済みユーザー]

でも下線は消さないとかっこわるいですね。ご忠告感謝です。