きっかけ
td内部に設置したラジオボタンのクリックのしにくさに業を煮やして諦めかけてたところ解決したのでメモ
見えない壁
td内部に設置したラジオボタンのクリック範囲を広げるためにやったこと
つまりは失敗例です
labelで挟み込んでマージン無くして幅は100%高さも100%！！
あれ？
幅はセル内いっぱいになったけど高さが何かに制限されている
とクロームちゃんは教えてくれました
その時のHTMLとCSS
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
<title>jstest</title>
</head>
<body>
<table>
<tr>
<th>ラジオ</th>
<th>テキスト</th>
</tr>
<tr>
<td><label><input type="radio"></label></td>
<td>テキストテキスト<br>テキストテキスト<br>テキストテキスト</td>
</tr>
</table>
</body>
</html>
test.css
/* ラジヲボタンのクリック範囲を少しでも広げる */
td label {
display: block;
width: 100%;
height: 100%;
margin: 0;
}
素人目には完璧なCSS記述に思えたんだけど
セルの見た目に対してクリック範囲がめちゃくちゃ狭い
テキストが改行してるのでセルが縦長なのに有効に使えない
成功例
寝ぼけ眼でゴロゴロしてたら思いついたのがこちらです
コード
HTMLさっきと同じなのでCSSを
test.css
@charset "UTF-8";
th {
border: solid 1px gray;
}
td {
min-width: 3em;
position: relative;
border: solid 1px gray;
}
/* ラジヲボタンのクリック範囲を少しでも広げる */
td label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
}
/* ラジヲボタンを中央に */
input[type="Radio"] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
たったこれだけのことです
セルの内部どこをクリックしても反応してくれます！
泣きそうになりました
最後に
知ってる人は当たり前に使ってるんだろうと思うけど…
失敗例の紹介はあれど成功例の紹介記事が見当たらなかった
注意点としてはラジオボタンのみの列を作ると潰れてしまうので
幅を設定するかなんかしてください(適当)
ラジオボタンを中央に寄せるのは目から鱗でした
position:absolute で中央に配置するやり方
感謝