Un expert CSS dans la salle ?

Copie d'écran d'une liste de commentaires

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à :

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/13591

Haut de page