読者です 読者をやめる 読者になる 読者になる

忘備録

日々の調べ物をまとめる。アウトプットする。基本自分用。

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>

結果 f:id:mktktmr:20151005080308p:plain

参考:ホームページ作成 - テーブルのセルでリンクする