[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)

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.

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.

Effectivement s’il n’y a pas de largeur définie ça ne va pas marcher.

Bonjour,

Et voilà le codepen.

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

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

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)

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.