テーブルでセル全体をリンクする方法（上下中央揃えやセルの高さの変化にも対応版）

テーブルのセル内にテキストリンクを設置したときに、リンクテキストだけでなくセル全体がクリックできるようにしたいことってありますよね。

セル全体をクリック範囲にする方法は検索すると山ほど出てくるのですが、僕の検索の仕方が悪いのか

• セルの高さに合わせて調整が必要
• 上下中央揃えのことを考えていない

というように汎用性がイマイチな方法ばかりでした。「もうちょっと何とかならんのか？」と考えたのでその方法をご紹介します。

やりたいこと

リンクを設置したtdにclass="cell-class"を指定するだけで高さが変わっても上下中央＋セル全体がリンクになります。

HTMLとCSSのソース

<table>
<tbody>
	<tr>
		<td>
			<a href="https://alive-website.com/notebook">テキストだけがリンク！</a>
		</td>
		<td class="cell-link">
			<a href="https://alive-website.com/notebook">セル全体がリンクだぞ！</a>
		</td>
	</tr>
	<tr>
		<td>
			改行を入れて2行分
			の高さになったセル
		</td>
		<td class="cell-link">
		<a href="https://alive-website.com/notebook">上下中央＋セル全体がリンク</a>
		</td>
	</tr>
	<tr>
		<td>
			改行を入れて
			3行文になっても
			自動的に対応
		</td>
		<td class="cell-link">
			<a href="https://alive-website.com/notebook">上下中央＋セル全体がリンク</a>
		</td>
	</tr>
</tbody>
</table>

.cell-link {
	padding: 0;
	height: 0;
}
.cell-link a{
	height: 100%;
	padding: 2px 5px;
	display: flex;
	align-items: center;
}

CSSの解説

まず、.cell-link の方から説明していきます。これはthやtdといったセル要素に適用されます。

多くのテーマやテンプレートではthやtdタグには余白が設定されているケースが多いのでそれを0にします。そうしないとクリック範囲がセル内一杯に広がりません。最初からpaddingがないテーマでは不要です。

2行目のheight:0;がこの記事の超重要ポイントです。

セル範囲を広げるにはaタグにdisplay:blockやdisplay:flexを指定しますが、なぜかtdやthタグの高さを数値指定しないとaタグの高さがセル内一杯に広がりません。さらに100％とかはダメでpxを使った具体的な数値で指定する必要があります。

thやtdタグに高さを指定しない場合、aタグのline-heightやpaddingを調整して高さをセルに合わせれば対応できまが、それを毎回やるのは面倒くさいですよね。

一方で、セルの高さを毎回数値設定するのも面倒くさいです。

幸いなことに、

• セルの高さにどんな数であれ数値さえ指定しておけばa要素はセル内一杯に広がる
• セルの高さは内容によって強制的に広がる

という仕様のようなので、セルの高さに任意の数値を設定しておけばOKとなります。

できるだけ汎用性を高くすることを考えると、セル内にどんなに小さなものが来ても対応できるように0としました。

次にaタグのスタイルです。

ネットで調べるとdisplay:blockとしている記事が非常に多いのですがこれだと上下中央揃えが効きません。paddingやline-heightで調整できないこともないですが汎用性がなく面倒くさいです。

この解決方法は簡単でaタグをflexboxにするだけです。そうすると中のテキストは子要素になるのでalign-items:centerが効きます。

さらに、これだけだと高さがテキストの高さになってしまうので、上下一杯に広がるようにheight:100％を指定します。

あとは余白を適当に設定すれば完成。

これで、どんなサイズにも対応できるセル一杯のリンクエリアになります。

簡単にできてユーザービリティも高いので是非使ってみてください。