J'ai une table avec deux cellules. L'un a un lien et l'autre a une image.

<table>
  <tr>
    <td>
      <a href="https://google.com">My Link</a>
    </td>
    <td>
      <img src="https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </td>
  </tr>
</table>

Comment puis-je faire fonctionner l'ensemble de la première cellule comme un lien plutôt que simplement comme le texte lui-même.

Il peut y avoir des images de tailles différentes, je ne peux donc pas me fier à une hauteur fixe.

jsfiddle

2
Urbycoz 23 mai 2018 à 18:16

3 réponses

Meilleure réponse

Comme la hauteur de l'image change constamment, supprimez les mots du <a>. Faites en sorte que le lien soit positionné de manière absolue dans le bloc afin qu'il occupe tout l'espace. Cela rendra la largeur des td toujours conforme au contenu de la cellule afin que le lien puisse couvrir tout l'espace.

td{
  border:1px solid;
  position:relative;
}
td a{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
}
<table>
  <tr>
    <td>
      <a href="https://google.com"></a>
      My Link
    </td>
    <td>
      <img src="https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </td>
  </tr>
</table>
4
Sensoray 23 mai 2018 à 15:30

Vous pouvez le faire comme ceci:

a {
  display: block;
  height: 100%;
}
table{height: 100%;}
td{height: 100%;}
<table>
  <tr>
    <td>
      <a href="https://google.com">My Link</a>
    </td>
    <td>
      <img src="https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </td>
  </tr>
</table>
2
Clément 23 mai 2018 à 15:23

Vous pouvez créer un pseudo élément pour couvrir la zone du td:

a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

td {
  position: relative; /*Make it relative to td*/
  border: 1px solid;
}
<table>
  <tr>
    <td>
      <a href="https://google.com">My Link</a>
    </td>
    <td>
      <img src="https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </td>
  </tr>
</table>
1
Temani Afif 23 mai 2018 à 15:32