表のセル全体をリンクさせる

2018/04/10 2018/04/10

table の td に を作る。
※[tr]でも大丈夫みたい。ちゃんとした書き方は後で確認。

そこに display:block; width:100%; height:100% を書く。

CSS
  table td a{
    display:block;
    width:100%;
    height:100%;
}

マウスを持ってきたときに、セル全体に色をつける場合は a:hove も追加

CSS
  table td a:hover {
background-color: #fffacd;
}

クリックした時に色をつける場合は a:active を追加

CSS
  table td a:active{
    background-color: #fffacd;
}

ちなみに
a : link / 未訪問リンク
a : visited / 訪問済みリンク
a : hover / カーソルが乗っている状態(クリックはしていない)
a : active / クリックしてから離れるまで

【参考】
http://www.phenomena.co.jp/blog/2017/03/29/css%E3%81%AE%E6%93%AC%E4%BC%BC%E3%82%AF%E3%83%A9%E3%82%B9link-visited-hover-active-focus%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9/


もし padding でセル内のスペースを作っている場合は、padding  しているところは色が付かない。

line-height に置き換えられる

CSS
  table {
    padding: 10px 5px;
}

CSS
  table {
    line-height: 10px;
}

でも上下の幅しか作れないのでで右に寄せたりしている場合は。。。

あと、改行も幅が広くなるのが難点。。。それが嫌だったらセル全体の色を付けなくてもいいかも。


Media Queries(メディアクエリ)でスマホとPCどっちかでセル全体に色を付ける場合は、 padding  ゼロに指定する。

じゃないと padding  したまま line-height が反映される

CSS(PC)
  table {
    padding: 10px 5px;
}

CSS(スマホ)
  table {    padding: 0px;
    line-height: 10px;
}

 


完成系

CSS
  table {
    line-height: 10px;
}

  table td a{
    display:block;
    width:100%;
    height:100%;
}

  table td a:hover{
    background-color: #fffacd;
}

  table td a:active{
    background-color: #fffacd;
}

【参考】
https://www.billionwallet.com/homepage/cell_link.html

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です