Lorsqu’un petit malin met une URL ultra longue en nom de commentateur on se retrouve, surtout sur petit écran, avec une colonne super large qui fait bien évidemment déborder la table vers la droite et pour consulter la fin il faut dérouler horizontalement. Et ça doit être encore pire sur mobile, je n’ai pas vérifié.
Je me dis qu’il serait préférable, au moins sur grand écran, de limiter la taille de cette colonne via CSS, sauf que là je coince. Le markup de cette cellule est le suivant (la classe nowrap est affectée à toutes les cellules de la ligne) :
<table>
…
<tbody>
…
<tr>
…
<td class="nowrap maximal">
…
</td>
…
</tr>
…
</tbody>
</table>Pour le style, on a pour l’instant ceci qui s’applique (je me limite à ce qui peut avoir un impact sur ce problème) :
table {
width: 100%;
}
table .nowrap {
white-space: nowrap;
}
table .maximal {
width: 100%;
}j’ai essayé :
table td {
overflow: hidden;
}et également :
table {
max-width: 100%;
}Mais ça ne change rien.
Quelqu’un a une idée sur comment faire ?
Solution fournie par Xavier Zalawa, que je remercie ici, sur Twitter, avec une démo :
table .maximal {
overflow: hidden;
text-overflow: ellipsis;
max-width: 1px; }Toute la magie du truc est dans le max-width: 1px; !
Et voilà :
1 De Glop -
Hello
En regardant vite fait, limiter la taille de table .maximal à quelque chose du genre 30% au lieu des 100% (ligne 1896 d’après l’inspection sur mon back office).
Attention je ne suis pas experte en css, je juste bidouille … ;p Pas vérifié si ça avait des incidences sur autre chose.
2 De Glop -
Ah ah le temps d’écrire et hop, une solution a été trouvée \o/
3 De Franck -
Merci d’avoir pris le temps de jeter un œil Glop !