35

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

href を td タグ自体に入れようとしましたが、少なくとも chrome 18 では機能しません

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

10 に答える 10

42

これを試して：

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;
}

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

于 2012-04-09T07:38:44.217 に答える
22

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

<td><a href="..." style="display:block;">&nbsp;</a></td>
于 2012-04-09T07:32:38.617 に答える
14

onclick-function と JavaScript リンクで簡単:

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

于 2014-06-16T01:16:16.340 に答える
5

非 JS の場合は、onclick メソッドを for backup<a>内の要素と組み合わせてみませんか? <td>うまくいくようです。

<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>
于 2018-02-21T16:41:39.137 に答える
2

問題:

(ユーザー: Kamal)良い方法ですが、垂直方向の配置の問題を忘れていました! この方法を使用すると、リンクを正確に TD 要素の中心に配置することはできません! vertical-align:middle; でも

(ユーザー: キリスト)あなたの答えが最良の答えです。位置合わせの問題はなく、今日ではすべてに 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;
}
于 2016-11-02T16:17:46.760 に答える
1

これが私の解決策です：

<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 でテスト済み)のようないくつかのテーブル セル プロパティの恩恵を受けることができます。

于 2014-04-12T17:58:57.010 に答える
0

セルを正確にリンクにするのではなく、テーブル自体を作成します。これを電子メールのボタンとして使用し、div のようなコントロールを提供します。

<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
  <table style="margin-left: auto; margin-right: auto;" align="center">
    <tr>
      <td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
    </tr>
  </table>
</a>

于 2020-07-15T11:26:08.823 に答える