table内のリンクをセル全体に広げる方法
方法:
- aタグのstyleにdisplay: block; width: 100%; height: 100%を設定する
ソース
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> table, td, th { border: 1px red solid; } a:hover { background-color:#ffcccc; } </style> </head> <body> <table> <tbody> <tr> <td style="width: 200px; height: 70px;"> <a href="http://www.yahoo.co.jp/">高さ、幅指定なし</a> </td> <td style="width: 200px; height: 70px;"> <a style="display: block; width: 100%; height: 100%" href="http://www.yahoo.co.jp/" >セル全体がリンク</a> </td> <td style="width: 200px; height: 70px;"> <a style="width: 100%; height: 100%" href="http://www.yahoo.co.jp/" >display: blockなし</a> </td> </tr> </tbody> </table> </body> </html>
結果