18041 sujets

Questions générales et questions de débutants

[Résolu] Dans un <td> un <a> doit occuper tout l'espace

Bonjour,

Un tableau à l'ancienne avec comme unique contenu des liens de taille inconnue, pas plus de un lien par cellule.

La taille est déterminée par le contenu.

Il faut un padding sur le <a> ou le <td> pour aérer.

Je me demande comment faire pour que le <a> occupe tout l'espace du <td> avec pour difficulté supplémentaire qu'un td peut être doté d'un rowspan supérieur à 1.

Je pensais qu'il suffisait de donner un display:block à <a> mais visiblement cela ne suffit pas.

Si nécessaire je ferais un petit codepen.
Modifié par boteha_2 (19 Feb 2023 - 12:30)
Modérateur
Salut Boteha_2,

Pourquoi un <table> ? Est ce que tes données sont tabulaires ? as tu un code html et css à nous partager ?
Modifié par niuxe (16 Feb 2023 - 23:43)
Bonjour niuxe,

OUI, c'est tabulaire, un petit tableau dans une page.

Je publierai un codepen en fin de journée.

Sûr que l'on peut passer le table en display: grid ou les td en display: flex.

Je cherche la solution la plus économique.
Pour bien voir les largeurs, j'ai mis de couleurs qui distinguent <td> et <a>

table {width:600px; margin:2em auto;}
td {border:1px solid black; background:yellow;}
a {display:block;background:blue;color:red;}

c'est {display:block} qui fait ce ça prend toute la largeur de la cellule.
si tu enlèves {display:block} le <a> ne prend que la largeur de son contenu.
Bonjour PapyJP,

Ma table n'a pas de largeur définie mais je pense que cela ne change pas grand chose.

boteha_2 a écrit :
Je pensais qu'il suffisait de donner un display:block à <a> mais visiblement cela ne suffit pas.


Bon je vais réessayer avec !important, je m'y mets ce soir.
Bonjour,

Et voilà le codepen.

Comme déjà dit le problème ne concerne que les liens dans une cellule fusionnée : td Smiley rowspan

Pour les cellules simples la taille est déterminée par le lien et son padding, donc le lien occupe tout l'espace.
Modérateur
Bonjour,

Si le tableau à toujours cette structure , line-height peut-être la solution:

On a 
td{line-height:1.4em;white-space:nowrap;}
a{padding:0.3em 0.5em 0.3em 13px}

et pas de border-collapse , ce qui fait grosso modo une cellule d'environ 2/2.2em de hauteur.

Pour le lien dans la cellule sur deux ligne , un line-height:3.8em avec son padding vertical de 0.6em, devrait remplir la cellule sur une hauteur de 4.4em environ correspondant a la hauteur occuper par les deux autres cellules.
exemple
[rowspan=2] a {line-height:3.8em}

https://codepen.io/gc-nomade/pen/JjaYYRQ

cdt
Bonjour gcyrillus ,

OUI, ton approche correspond au problème.

Juste deux nuances.

j'ai ajouté :
table {border-collapse: collapse; border-spacing: 0}


Mais je ne pense que cela ne change rien au calcul du line-height.

La structure reste identique mais le rowspan peut monter à 3.
J'ai modifié le codepen en conséquence.

Je reviens sur le sujet en début d'après-midi.
Modifié par boteha_2 (18 Feb 2023 - 13:09)
Modérateur
boteha_2 a écrit :
Bonjour gcyrillus ,

OUI, ton approche correspond au problème.

Juste deux nuances.

j'ai ajouté :
table {border-collapse: collapse; border-spacing: 0}


Mais je ne pense que cela ne change rien au calcul du line-height.

La structure reste identique mais le rowspan peut monter à 3.
J'ai modifié le codepen en conséquence.


Pour chaque rowspan, il suffit d'ajouter une règle avec le line-height approprié.
rowspan=2 => line-height X 2
rowspan=3 => line-height X 3

En utilisant une variable CSS et calc, cela devrait être facile à gerer et mettre à jour à partir du font-size de table par exemple. https://codepen.io/gc-nomade/pen/qBMObxj

Cdt
Merci de ton suivi.

Ta solution est parfaite.

Juste une chose que je ne comprends pas.

table {background-color: #FFF; border: 1px solid #5E7493;
--fontSize: 16px;
font-size:var(--fontSize)}

th, td {line-height: 1.4em}

a {display: block; padding: 0.3em 0.5em 0.3em 13px;margin:0;}

td[rowspan="2"] a {line-height: calc( 1.6em  * 2.2) ;}
td[rowspan="3"] a {line-height: calc( 1.6em  * 3.3) ;}


Pourquoi définis-tu un font-size à 16px ?

Sans valeur, le font-size est hérité du parent et par défaut 1em.

La hauteur d'une cellule simple est donc sauf erreur de 0.3 + 1.4 + 0.3 = 2 em
padding-top + line-height + padding-bottom

Pour une cellule double ne suffit-il pas d'ajouter 2em au line-height ?
Et 4em si cellule triple ?

td[rowspan="2"] a {line-height: 3.4 ;}
td[rowspan="3"] a {line-height: 5.4 ;}

C'est ce que j'ai fait sur mon codepen et ça a l'air de marcher.

Qu'en penses-tu ?
Bonjour,

Si personne n'a rien à ajouter je pense pouvoir cocher Résolu.

Encore merci de votre aide, particulièrement gcyrillus.
Prévenir un modérateur
Répondre au sujet
Aller à