テーブルのtd要素内のリンクを行（tr要素）リンクにする

Javaスクリプトもｊクエリも使わなくていい方法を発見！CSSだけできちゃいます！

ソースはこんな感じです。
かっこよくはないけど、とってもシンプルです。

 ★ポイント★

1.  <thead>と<tbody>を省略しない！
2. thでセルをつくる！

thでセルを作ったら、あとはひたすら同じリンクを貼るだけ！(笑)
すると見た目上、テーブルセルのどこからでもリンク先に飛べる！…ように見える(笑)

実際のところは、
「tdの全体リンク」　＋　「trのhover機能」
という組み合わせです。

jクエリで簡単にできちゃうみたいだけど、jクエリの勉強をしていない私にはこちらがいいな。

HTML－－－－－－－－－－－－－－－－－－

<table class="test">
　<thead>

　　<tr>
  　　　<th><a href="aa" name="TEST">あ</a></th>
      　　<th><a href="aa" name="TEST">い</a></th>
      　　<th><a href="aa" name="TEST">う</a></th>

      　　<th><a href="aa" name="TEST">え</a></th>
      　　<th><a href="aa" name="TEST">お</a></th>
　　</tr>
　</thead>

　<tbody>

　　<tr>
     　 　<th><a href="bb" name="TEST">か</a></th>
      　　<th><a href="bb" name="TEST">き</a></th>
      　　<th><a href="bb" name="TEST">く</a></th>

      　　<th><a href="bb" name="TEST">け</a></th>
      　　<th><a href="bb" name="TEST">こ</a></th>
   　</tr>

　</tbody>
</table>

－－－－－－－－－－－－－－－－－－－－

CSS－－－－－－－－－－－－－－－－－－

.test { width:95%; height:10%; background:white;}

/*th*/
.test thead th , tbody th {
　　border:1px solid black;
　　width:20%;
　　text-align: center;
　　font-size: 20px;
　　padding: 10px 0;
}

.test th a{
　　color: black;
　　display:block;
　　width:100%;
　　height:100%;
　　font-size: 30px;
　　text-decoration: none;
}

.test th a:hover {
　　background: #bd1550;
}

/*tr*/
.test tr:hover{
　　background: #bd1550;
　　color: white;
　　font-weight: bold;
}
－－－－－－－－－－－－－－－－－－－－

適宜コピペして使ってください(#^^#)

[http://]

テーブルのtd要素内のリンクを行（tr要素）リンクにする

Javaスクリプトもｊクエリも使わなくていい方法を発見！CSSだけできちゃいます！

ソースはこんな感じです。
かっこよくはないけど、とってもシンプルです。

★ポイント★

①とを省略しない！

②thでセルをつくる！

thでセルを作ったら、あとはひたすら同じリンクを貼るだけ！(笑)
すると見た目上、テーブルセルのどこからでもリンク先に飛べる！…ように見える(笑)

実際のところは、
「tdの全体リンク」　＋　「trのhover機能」
という組み合わせです。

jクエリで簡単にできちゃうみたいだけど、jクエリの勉強をしていない私にはこちらがいいな。

HTML－－－－－－－－－－－－－－－－－－

あ	い	う	え	お
か	き	く	け	こ

－－－－－－－－－－－－－－－－－－－－

CSS－－－－－－－－－－－－－－－－－－

.test { width:95%; height:10%; background:white;}

/*th*/
.test thead th , tbody th {
border:1px solid black;
width:20%;
text-align: center;
font-size: 20px;
padding: 10px 0;
}

.test th a{
color: black;
display:block;
width:100%;
height:100%;
font-size: 30px;
text-decoration: none;
}

.test th a:hover {
background: #bd1550;
}

/*tr*/
.test tr:hover{
background: #bd1550;
color: white;
font-weight: bold;
}
－－－－－－－－－－－－－－－－－－－－

適宜コピペして使ってください(#^^#)