[Résolu] <td> <a> {height:100%;} --> JS ?

Bonjour,

Je souhaite remplir la cellule <td> d'un tableau <table> avec un bouton <a>, dans une ligne <tr> à hauteur variable.

Exemple ici : https://codepen.io/anon/pen/QMaZrG

Il semble que c'est à peu près impossible en CSS, aussi je me demande si ce ne serait pas faisable en JS ? Quelque chose comme

hauteur bouton en pixels = hauteur de la cellule qui le contient

Merci.

Bonjour.

Si, si, c'est possible en CSS : mettre la cellule en 'position : relative', le lien en 'position : absolute' et contraindre sur les quatres côtés comme une toile sur un cadre (left, top, right, bottom…).

Mais tel quel, ce n'est pas très joli car le lien n'est pas centré verticalement car alors 'vertical-align : middle' ne fonctionne pas.

Je ressortirais plutôt les pseudo-éléments et je mettrais la manip' du début sur un '::before'.

(Je me demande bien pourquoi height : 100% ne marche pas tout simplement.)

J'avais tenté mais pas réussi.
C'est le height:1px; sur le table qui tient tout.... étrange.....

Bonjour.

Adage a écrit :

Je n'arrive cependant pas à obtenir l'effet recherché en suivant vos instructions.
J'ai rajouté ça en fin de code mais sans aucun effet :

td {position:relative;}
a::before {
  position:absolute;
  right:0;
  left:0;
  top:0;
  bottom:0;
}

Désolée, je n'avais pas vérifié mais apparemment les cellules ne semblent pas pouvoir servir de référence pour les pseudo-éléments…

kustolovic a écrit :
non cela ne fonctionne pas car on ne peut mettre position: relative sur une cellule de table (le résultat est indéfini)

Ça a l'air de fonctionner pour Firefox en positionnant directement le lien en absolu dans une cellule en relative… (celle-là, j'avais vérifié). Mais si ça ne fonctionne pas pour d'autres navigateurs… votre méthode est probablement meilleure.


Modifié par Zelena (18 Aug 2017 - 17:33)

kustolovic a écrit :
on ne peut mettre position: relative sur une cellule de table

En fait c'était vrai avant mais maintenant il est tout à fait possible de le faire (si je ne dis pas de bêtises)...

Bonjour,

oui c'est possible depuis Firefox 37 à peu près (je me rappelais de 42 mais ça doit être une version "ESR"). RESOLVED FIXED in mozilla37

Bonjour.

Adage a écrit :
Par contre je n'arrive pas à faire un vertical-align:middle... et les line-height:100% ne semblent pas fonctionner...

Avec 'display : block', 'a', le lien n'est plus seulement que du texte, mais aussi un contenant qui prend déjà toute la place disponible. Il faut le centrer à l'intérieur de lui-même.
En mettant une valeur à line-height ?

line-height: 2;
line-height: 3;

…

Zelena a écrit :
En mettant une valeur à line-height ?

line-height: 2;
line-height: 3;

…

Mettre une valeur à line-height impliquerait que la hauteur de la ligne est fixe... Pourtant elle peut faire 2, 4, 8 lignes de haut... Ou alors j'ai raté quelque chose... ?
Merci.

Et en ajoutant cela:

a::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

Merci infiniment ! C'est génial.

Adage a écrit :
Mettre une valeur à line-height impliquerait que la hauteur de la ligne est fixe... Pourtant elle peut faire 2, 4, 8 lignes de haut... Ou alors j'ai raté quelque chose... ?

Line-height est la taille de l'interligne, et avec un nombre, elle est proportionnelle à la taille de la police.

@kustolovic : joli 'strut'.