Rendre le lien dans la cellule de tableau remplit toute la hauteur de la ligne

J’ai une table de données et chaque cellule est un lien. Je veux permettre à l’utilisateur de cliquer n’importe où dans la cellule du tableau et de lui faire suivre le lien. Parfois, les cellules de la table sont plus d’une ligne mais pas toujours. J’utilise td un {display: block} pour que le lien couvre la majeure partie de la cellule. Lorsqu’il y a une cellule dans une ligne de deux lignes et que les autres ne sont qu’une ligne, la ligne ne remplit pas tout l’espace vertical de la ligne du tableau. Voici l’exemple HTML et vous pouvez le voir en action ici http://www.jsfiddle.net/RXHuE/ :

  td {width: 200px} td a {display: block; height:100%; width:100%;} td a:hover {background-color: yellow;}     
Cell 1
second line
Cell 2 Cell 3 Cell 4

Vous avez besoin d’un petit changement dans votre CSS. Faire td height:100%; fonctionne pour IE 8 et FF 3.6, mais cela ne fonctionne pas pour Chrome.

 td { width: 200px; border: solid 1px green; height: 100% } td a { display: block; height:100%; width:100%; } 

Mais faire de la height à 50px fonctionne pour Chrome en plus de IE et FF

 td { width: 200px; border: solid 1px green; height: 50px } td a { display: block; height:100%; width:100%; } 

Modifier:

Vous avez donné la solution vous-même dans un autre message ici; qui doit utiliser display: inline-block; . Cela fonctionne lorsqu’il est combiné avec ma solution pour Chrome, FF3.6, IE8

 td { width: 200px; border: solid 1px green; height: 100%} td a { display: inline-block; height:100%; width:100%; } 

Mettre à jour

Le code suivant fonctionne pour moi dans IE8, FF3.6 et chrome.

CSS

 td { width: 200px; border: solid 1px green; height: 100%; } td a { display: inline-block; height:100%; width:100%; } td a:hover { background-color: yellow; } 

HTML

 
Cell 1
second line
Cell 2 Cell 3 Cell 4

L’exemple est ici

Définissez une marge négative arbitrairement grande et un remplissage égal sur l’élément de bloc et le dépassement de capacité masqué sur le parent.

 td { overflow: hidden; } td a { display: block; margin: -10em; padding: 10em; } 

http://jsfiddle.net/RXHuE/213/

Travaux de piratage suivants [Testé sur Chrome / Firefox / Safari] Avoir le même remplissage pour les éléments td et anchor. Et pour l’ancre, il y a aussi une marge égale à -ve de la valeur de remplissage.

HTML

 
Hello

CSS:

 td { background-color: yellow; padding: 10px; } a { cursor:pointer; display:block; padding: 10px; margin: -10px; } 

Violon de travail: http://jsfiddle.net/JasYz/

Un peu tard pour la fête, mais il y a une belle solution que je viens de découvrir.

Vous pouvez utiliser une combinaison d’éléments positionnés relatifs et absolus, ainsi qu’un pseudo-élément pour obtenir l’effet souhaité. Pas de balisage supplémentaire nécessaire!

Changer la cellule de la table (

), pour être position: relative; et créez un pseudo-élément ::before ou ::after sur la balise et définissez-le sur position: absolute; , et utilisez également top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0; .

Comme le pseudo-élément est attaché à la balise d’ancrage et que vous lui indiquez qu’il occupe la totalité de la cellule de tableau, la balise d’ancrage sera au moins de cette taille, sans affecter le contenu réel de la balise d’ancrage ( conservant ainsi son alignement central).

Par exemple

HTML:

 
I'm centralised I'm 100% width AND I'm 100% height WITHOUT extra markup OR JavaScript!

CSS:

 table { border-collapse: collapse; table-layout: fixed; } td { position: relative; width: 150px; border: 2px solid red; } td a { padding: 0.5em 1em; } td a::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 

J’espère que cela t’aides!

Essayez l’ display: block :

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

[EDIT] WTF … Je peux confirmer que cela ne fonctionne pas dans FF 4 et Chrome. Cela marche:

 td a {display: block; height: 2.5em; border: 1px solid red;} 

Cela suggère que la height:100%; n’est pas défini dans une cellule de tableau. Peut-être est-ce parce que la cellule tire sa taille du contenu (le contenu ne peut donc pas dire “dites-moi votre taille” car cela conduirait à une boucle). Cela ne marche même pas si vous définissez une hauteur pour les cellules comme ceci:

 td {width: 200px; height: 3em; padding: 0px} 

Là encore, le code ci-dessus échouera. Je suggère donc d’utiliser une hauteur définie pour les liens (vous pouvez omettre la largeur, c’est-à-dire 100% par défaut pour les éléments de bloc).

[EDIT2] J’ai cliqué sur une centaine d’exemples à l’ adresse http://www.cssplay.co.uk/menus/ mais aucun d’entre eux ne regroupe des cellules monolignes et multi-lignes. On dirait que vous touchez un angle mort.

Je vais poster la même réponse ici, comme je l’ai fait sur ma propre question .

Inspiré par la réponse de Jannis M , j’ai fait ce qui suit:

 $(document).ready(function(){ $('table tr').each(function(){ var $row = $(this); var height = $row.height(); $row.find('a').css('height', height).append(' '); }); }); 

J’ai ajouté un   puisque les liens vides (ne contenant pas de nœuds de texte) ne peuvent pas être stylés (?).

Voir mon violon mis à jour

Vous pouvez utiliser un peu de javascript.

   Cell 3  

Ou, vous pouvez créer un élément qui remplit complètement la cellule (div, span, peu importe) et envelopper le gros élément invisible.

    
Cell 1
second line

Le seul problème est que l’utilisation de display: block force le navigateur à ignorer l’alignement vertical: centre …

Oops.

J’ai fait preuve de discernement pour trouver une cellule avec une hauteur de 60 et une police qui occupait 20 pixels en ajoutant une br … Puis j’ai réalisé que j’avais des éléments avec du texte à 2 lignes. Dang.

J’ai fini par utiliser le javascript. Le javascript ne donne pas la bonne chose clicky pointeur mousey, mais la ligne de texte le fait, donc il va réellement déclencher une réponse visuelle, mais pas où je le veux … Alors le Javascript va attraper tous les clics qui manquent ‘le href actuel.

Peut-être pas la solution la plus élégante, mais ça marche assez bien pour le moment.

Maintenant, si je pouvais seulement trouver comment le faire de la bonne façon ….

Des idées sur la façon d’append l’icône de la souris à une main pour la zone couverte par le onclick? À l’heure actuelle, le clic à la page fonctionne, mais l’icône ne change que lorsqu’il touche le href qui n’affecte que le texte.

Pourquoi ne vous débarrassez-vous pas simplement du altogheter et ajoutez-vous un onClick au

directement?

      
Cell 1
second line
Cell 2 Cell 3 Cell 4

De cette façon, vous coupez l’intermédiaire.

PS: je sais que cela a été demandé et répondu il y a plusieurs années, mais aucune des réponses ci-dessus n’a résolu le problème dans mon cas. J’espère que cela aide quelqu’un.

Pour moi, la seule solution est de remplacer

par

s et de les styler en utilisant display:table et display:table-row conséquence.

Vous pouvez ensuite remplacer

par et le avec display:table-cell .

Travaillez parfaitement même sur des hauteurs variables de contenu

.

si original html sans ancres:

 
content1
another_line
content2

devient maintenant:

 a:hover { background-color:#ccc; }