CSS : fixed cell-width with text-overlflow management

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.

#18095  

https://codepen.io/lehollandaisvolant/pen/REVNLy?editors=1100

Pour apprécier le film Roma, Netflix nous dit comment bien régler sa télé

Pfff… à une époque, c’était la post-prod qui modifiait l’image pour que le film passe partout et s’affiche correctement.

Maintenant, c’est à l’utilisateur d’adapter la télé à tous les films. Tu parles d’un progrès.

J’imagine que c’est ce qui arrive quand on filme avec un iPhone et qu’on paye le gars des effets-numériques au lance-pierres.

#18092  

https://www.numerama.com/pop-culture/450689-pour-apprecier-le-film-roma-netflix-nous-dit-comment-bien-regler-sa-tele.html