PROJET AUTOBLOG


le hollandais volant links

Site original : le hollandais volant links

⇐ retour index

CSS : fixed cell-width with text-overlflow management

samedi 22 décembre 2018 à 21:08

Les tableaux sont chiants à styliser en CSS, mais je viens de trouver une méthode qui marche pas mal.

Pour les cellules de taille fixe, il faut leur donner un `width` et un `max-width` de la même valeur.

Par contre, il faut toujours qu’une des cellules fasse office de "bouche-trou" et prenne toute la place restante. Ça c’est obligé. Ou alors, il ne faut pas donner de width:100% au tableau lui-même. Dans ce cas, le tableau ne prend que l’espace qu’il a besoin.

ÉDIT : je l’ai amélioré un peu.
Regardez la dernière cellule : elle est aussi large que son contenu.

Dans cet exemple on a donc un tableau :
— avec ces cellules de taille fixe (1, 2). Le texte s’adapte à la cellule.
— avec des cellules de taille variable (3). La cellule est flexible en fonction du contenant et de la taille de la page (ou de la fenêtre de navigation). Le texte s’adapte à la cellule.
– avec des cellules de taille variable (4). La cellule est flexible en fonction du contenu. La cellule s’adapte au texte.


— (permalink)