web-dev-qa-db-ja.com

<td>テーブルセルからリンクを作成する方法

私は次のものを持っています：

<td>
  some text
  <div>a div</div>
</td>

<td>...</td>全体をハイパーリンクにしたいと思います。 JavaScriptを使用しないでください。これは可能ですか？

htmlcsshyperlink
58
aeq

はい、文字通り<td>ではありませんが、それは可能ですが、その中には何が含まれています。簡単なトリックは、コンテンツがセルの境界線まで広がるようにすることです（ただし、境界線自体は含まれません）。

すでに説明したように、これは意味的に正しくありません。 a要素はインライン要素であり、ブロックレベルの要素として使用しないでください。ただし、ほとんどのブラウザで機能する例（ただし、JavaScriptとtd：hover CSSスタイルは非常に洗練されています）を次に示します。

<td>
  <a href="http://example.com">
    <div style="height:100%;width:100%">
      hello world
    </div>
  </a>
</td>

PS： このスレッドの別のソリューションで説明されている としてCSSを使用して、ブロックレベルの要素のaを変更するのは実際には簡単です。 IE6ではうまく動作しませんが、それはニュースではありません;）

代替（非推奨）ソリューション

あなたの世界がInternet Explorerのみである場合（まれに、今日）、HTML標準に違反してこれを書くことができます。 ）。 IE以外のブラウザはリンクをレンダリングしませんが、テーブルを正しく表示します。

<table>
    <tr>
        <a href="http://example.com"><td  width="200">hello world</td></a>
    </tr>
</table>
88
Abel

このコードを使用してください。 <a>を展開して、セルを水平方向に塗りつぶします。垂直方向に塗りつぶすには、heightプロパティも使用します。

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

td {
  /* Cell styles for demonstration purposes only */
  border: 1px solid black;
  width: 10em;
}
<table><tr>
  <td>
    <a href="http://example.com">
      Hello World
    </a>
  </td>
</tr></table>
30
Uzair Bin Nisar

実際のアンカー要素を使用して、ブロックとして設定することをお勧めします。

<div class="divBox">
    <a href="#">Link</a>
</div>

.divBox
{
    width: 300px;
    height: 100px;
}
.divBox a
{
    width: 100%;
    height: 100%;
    display: block;
}

これにより、アンカーが親divの同じ寸法に設定されます。

13
Dustin Laine

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

<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でテスト済み）

4
amp

Td全体をハイパーリンクにしたいと思います。私はjavascriptなしで好むだろう。これは可能ですか？

Javascriptなしでは不可能です。また、それはセマンティックマークアップではありません。代わりにリンクを使用する必要があります。それ以外の場合は、onclickハンドラーを<td>にアタッチして他のページにリダイレクトする必要があります。

1
Sarfraz