28128 sujets

CSS et mise en forme, CSS3

connecté
Bonjour,

Ce codepen illustre mon problème.

J'ai deux paragraphes et un tableau.

La largeur du tableau est fixée par le contenu, il est impossible de la prédire a priori.

Mais je veux que cette largeur soit celle des paragraphes également fluides et plus larges que le tableau.

Peut-on y arriver en CSS ?
div {width: la largeur de cette tabla}

GRID ou FLEXBOX n'ont pas prévu le cas, il me semble.

Ou un JS mais fiable en production.

S'il faut changer la structure HTML pas de souci.
connecté
Modérateur
Salut,

Je ne comprends pas bien ta question. Suivant ce que j'ai compris

table{
  width: 100%;
}


edit: Si tu veux que les <p> aient la largeur du tableau. Je ne vois pas de solution en css. En JS :

let $table = document.querySelector('table'),
    width_table = $table.getBoundingClientRect().width,
    $ps = document.querySelectorAll('p')
$ps.forEach($p => $p.style.width = `${width_table}px`)

Modifié par niuxe (16 Jan 2023 - 21:38)
connecté
Bonjour niuxe,

Merci de ton suivi.

Ton code JS fait le boulot.

Je l'ai intégré au codepen.

Penses-tu que c'est fiable en production ?
Modérateur
Bonjour,

de ce que je comprend du titre, un
width: min-content;
sur le div devrait faire l'affaire. (auparavant l'astuce etait un .. display:table; + width:0; Smiley smile ).

Un fork de ton pen pour illustrer : https://codepen.io/gc-nomade/pen/LYBzPgb

Cdt
Modifié par gcyrillus (16 Jan 2023 - 22:23)
Meilleure solution
connecté
Modérateur
@boteha_2: le code que je t'ai produit fonctionne. Mais il faut que tu fasses les vérifications d'usage (est ce que table ne vaut pas null et est ce que les p ne valent pas null). Ceci dit la solution de gcyrillus est plus pertinente.

@gcyrillus: merci. Je ne connaissais pas. D'ailleurs, lorsque j'ai répondu au sujet, j'ai pensé à toi Smiley smile Puis tu es passé par là

edit : j'ai noté la solution de gcyrillus comme la plus appropriée (meilleur solution).
Modifié par niuxe (17 Jan 2023 - 04:50)
connecté
Bonjour gcyrillus,

Merci de ton suivi.

min-content et max-content, d'accord.

Je reviens vers vous en fin de journée.
connecté
J'ai mis à jour le codepen avec le code de gcyrillus.

C'est l'option table {width:max-content} que j'ai retenue.

Difficile de faire plus simple.

Est-ce bien supporté par les navigateurs ?

min-content
Va chercher la plus petite largeur des enfants directs, est-ce bien cela ?

max-content : la largeur intrinsèque préférée.
Je ne comprends pas trop mais l'effet est parfait.
Modérateur
boteha_2 a écrit :


Est-ce bien supporté par les navigateurs ?

Plutôt oui, voir https://caniuse.com/mdn-css_properties_width_max-content

min-content
Va chercher la plus petite largeur des enfants directs, est-ce bien cela ?
Oui,
alternative si pas supporté pour un element block : display:table;+width:0+table-layout:auto;

max-content
Va prendre la plus grande largeur cumulée qu'un texte , élément en ligne peuvent occupés, ici chaque cellule de ton tableau affiche le texte sur une seule ligne.
Alternative si min-content pas supporté : white-space:nowrap sur les cellules .

Bonne journée
connecté
Bonjour,

gcyrillus, merci de tes précisions.

J'ai voulu corser un peu le problème et me rapprocher de la situation en réel.

Dans le codepen j'ai ajouté sous le tableau un deuxième tableau de taille plus petite.

C'est toujours la taille du grand tableau qui fixe la largeur.

Cela me convient parfaitement mais ma définition de min-content devient inexacte.

min-content
Va chercher la plus petite largeur des enfants directs

Ben non, autrement ce serait la taille du petit tableau qui serait prise en compte.

Va chercher la plus petite largeur des enfants directs, mais sans écraser un autre élément fluide.

C'est mal dit mais l'idée est-elle là ?
Modifié par boteha_2 (18 Jan 2023 - 13:06)
Modérateur
Bonjour,
boteha_2 a écrit :
Bonjour,

gcyrillus, merci de tes précisions.

J'ai voulu corser un peu le problème et me rapprocher de la situation en réel.

j'ai ajouté sous le tableau un deuxième tableau de taille plus petite.

C'est toujours la taille du grand tableau qui fixe la largeur.



min-content
Va chercher la plus petite largeur des enfants directs


Ben non, autrement ce serait la taille du petit tableau qui serait prise en compte.


Heu oui, min-content prend la largeur du plus grand élément qu'il trouve , pour le coup c'est le mot le plus long ou une boite en ligne la plus large ou ton tableau le plus large.

boteha_2 a écrit :
...
Va chercher la plus petite largeur des enfants directs, mais sans écraser un autre élément fluide.

C'est mal dit mais l'idée est-elle là ?


Ton exemple applique un width:max-content sur le tableau, il occupe donc le maximum de largeur que lui impose ses contenus en lignes, et c'est le plus large qui dirige la danse.

Malgré tout, le plus grand ne peut pas prendre la largeur du plus petit sans avoir des débordement.
Un compromis serait de retiré ce width:max-content sur les tableaux et éventuellement de rajouté un table{min-width:100%} pour avoir une cohérence de largeurs de tous les tableaux, re-illustration Smiley smile https://codepen.io/gc-nomade/pen/rNrYBPE

cdt
connecté
Bonjour gcyrillus,

En fait ce qui se passe dans mon codepen me convient.

Les deux tables sont à largeur max-content et c'est la plus grande des deux qui fixe la largeur du parent.

Ton codepen est très intéressant :

table {min-width:calc(100% - 2em);/* parce-que margin:1em;*/}


On a bien avancé, j'attends mes expériences en test pré-production avant de cocher Résolu.

Encore merci.