Alignement vertical d'un pseudo élément dans un tableau

Bonjour,

Dans un tableau j’utilise le code suivant :

<tr><td class="dia"></td><th>Support</th><td>Synthèse connectique RJ45</td></tr>

table#ore td.dia::before {content: "\002666"; color: #999}
@media screen and (max-width: 768px)
{
table#ore td.dia {vertical-align: top}
table#ore td.dia::before {content: "\2022"}
}

Il s'agit de créer une puce responsive, $diams; pour grand écran et • pour petit.

Ce qui m'énerve est que ma puce est trop haute par rapport au texte.
J'ai essayé sans succès d'autres valeurs : text-top ou baseline ; sans succès.

Si je ne donne pas de vertical-align la puce est centrée middle, ce qui est parfait si le tr fait 1 ligne mais moche si 2 lignes.

Avez-vous une idée ?

Merci d'avance.

Bonjour,

Je me demande s'il y a une possibilité de jouer avec line-heigth et vertical-align: baseline.

Je vais essayer.

Salut

je ne sais pas comment tu construit ton tableau, mais déjà j'ai l'impression que tu mélange le thead et le tbody mais bon.

https://codepen.io/JUSEN/pen/bPBwbJ

Sinon si tu peux partager un exemple de ton problème

Attention au cafouillage

td {vertical-align:x} aligne l'ensemble du contenu dans la hauteur de la cellule.

td::before {content:'texte ou image ';vertical-align:x} s'aligne sur le baseline de l'interligne.

Sinon, je ne perçois, comprends pas ton soucis, la puce s'aligne bien en face de 'support'.

Bonjour,

Il n'y a pas de thead ni de tbody.
J'utilise th pour ce qui correspond au titre de la ligne, il me semble que c'est permis.

Il n'y a pas de souci si le tr est sur une ligne.
Par contre si deux lignes il est difficile d'aligner la puce sur le texte à droite.

Le texte est en vertical-align: top
Si je le passe en vertical-align: middle je contourne le problème.
Modifié par boteha_2 (22 Jun 2019 - 15:54)

Bonjour,

J'ai l'impression que mon problème est identique à celui-là :

<tr><td class="dia">&bull;</td><td>Support</td><td>Ligne un<br />Ligne 2</td></tr>

td {vertical-align: top; line-height: 1.4em; font-size: medium}
td.dia {font-size: x-large}

Et je veux que • soit bien aligné sur "Support" comme s'ils étaient dans la même cellule.

Une solution que j'ai trouvée :

td.dia {vertical-align: baseline;  line-height: 2.1em}

Donc on centre sur baseline et on augmente la valeur de line-height: afin de baisser • qui sans cela s'affiche trop haut.

C'est un peu euristique mais cela semble bien marcher.
Modifié par boteha_2 (22 Jun 2019 - 21:21)