web-dev-qa-db-ja.com

テーブルのハイパーリンクのセルを作成する方法

Javascriptまたはjqueryを使用せずにHTMLでテーブルセル全体をハイパーリンクするにはどうすればよいですか？

Tdタグ自体にhrefを入れようとしましたが、少なくともchrome 18

<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
htmlhyperlinkhref
25
vaichidrewar

これを試して：

HTML：

<table width="200" border="1" class="table">
    <tr>
        <td><a href="#">&nbsp;</a></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

CSS：

.table a
{
    display:block;
    text-decoration:none;
}

それがうまくいくことを願っています。

32
Kamal

この方法を試してください：

<td><a href="..." style="display:block;">&nbsp;</a></td>
17
azawaza

Onclick-functionとjavascriptリンクで簡単に：

<td onclick="location.href='yourpage.html'">go to yourpage</td>

12
Philip

私も解決策を探していましたが、別のサイトでこのコードを見つけました：

<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>

7
Christhofer Natalius

非JSのバックアップのためにonclickメソッドを<a>内の<td>要素と組み合わせてみませんか？うまくいくようです。

<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>
2
shootz

問題：

（User：Kamal）これは良い方法ですが、垂直方向の配置の問題を忘れてしまいました！この方法を使用すると、vertical-align：middleを使用しても、TD要素！の中心にリンクを正確に配置できません。

（ユーザー：キリスト）位置合わせの問題はなく、今日ではすべての人にJavaScriptが必要なので、あなたの答えが最良の答えです...それは古いスマートフォンでもあらゆる場所にあります。 。そして、デフォルトで有効になっています...

（ユーザー：キリスト）の回答を完了するための私の提案：

HTML：

<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>

CSS：

a.LN1 {
  font-style:normal;
  font-weight:bold;
  font-size:1.0em;
}

a.LN2:link {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN3:visited {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN4:hover {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN5:active {
  color:#A4DCF5;
  text-decoration:none;
}
1
Mahdi Jazini

私の解決策は次のとおりです。

<td>
   <a href="/yourURL"></a>
   <div class="item-container">
      <img class="icon" src="/iconURL" />
      <p class="name">
         SomeText
      </p>
   </div>
</td>

（もっと少なく）

td {
  padding: 1%;
  vertical-align: bottom;
  position:relative;

     a {
        height: 100%;
        display: block;
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
       }

     .item-container {
         /*...*/
     }
}

このように、vertical-align。（Chromeでテスト済み）

1
amp

これは、人々がカレンダーを作成しようとしているときに見たことがあります。セルをリンクしたいが、その中の他の何かを台無しにしたくない、これを試してみて、それはあなたの問題を解決するかもしれません。

<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
0
Jason