表のセルのリンクが行の高さ全体に広がるようにするにはどうすればよいですか?

表のセルのリンクが行の高さ全体に広がることを確認します

データを表形式で表示する場合、多くの場合、各表のセル内にクリック可能なリンクを作成することが望ましいです。 。セルの高さに関係なく、これらのリンクが完全に機能するようにするには、次の手法の実装を検討してください。

CSS コードで、次のスタイルを適用します。

<code class="css">td {
    overflow: hidden;
}
td a {
    display: block;  /* Allow links to fill the full height */
    margin: -10em;   /* Create a large negative vertical margin */
    padding: 10em;  /* Add an equal amount of vertical padding to compensate */
}</code>

負のマージンを設定するパディングを一致させると、リンクがセルの高さ全体を埋めるかのような錯覚を効果的に作り出すことができます。負のマージンにより、リンクのコンテンツが表示領域を超えて押し出されますが、パディングにより周囲の表の行と一致するように垂直方向のスペースが追加されます。

このソリューションにより、1 つのセルに複数行のテキストが含まれている一方で、他のセルには 1 行のテキストしか含まれていない場合でも、単一行の場合、高さに関係なく、すべてのセルのリンクをクリックできます。ユーザーはセル内の任意の場所をクリックして、リンクのアクションをトリガーできます。

更新された CSS を使用した HTML コードの例:

<code class="html"><table border="1">
  <tbody>
    <tr>
      <td><a href="link1.html">Cell 1 with multiple lines</a></td>
      <td><a href="link2.html">Cell 2 with single line</a></td>
      <td><a href="link3.html">Cell 3 with single line</a></td>
    </tr>
  </tbody>
</table></code>

結果は、ユーザーがセル内の任意の場所をクリックして、セルの高さが異なる行であっても、対応するリンクをたどってください。

以上が表のセルのリンクが行の高さ全体に広がるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。