Discussion :

[BartRoX]

Bonjour

J'ai des tables dans mes pages et je n'arrive pas à leur donner la largeur que je souhaite.
Plus précissement je leur donne une largeur (width: XX px), jusque là cela fonctionne bien,
Mais si je réduis la taille de la page ou si la table possède beaucoup de colonne, la table se rétrécie, et d'une manière peu élégante qui plus est...
Je souhaiterai que la taille que je donne reste quoiqu'il arrive, quitte à devoir scroller horizontalement pour voir ce qui dépasse.

[NoSmoking]

Bonjour,
regarde du côté de la propriété : table-layout.

[BartRoX]

Merci, je viens d'essayer d'ajouter [table-layout: fixed] au CSS de ma table mais cela ne change rien...
Cette propriété sembe d'avantage concerner la taille des cellules en cas de débordement du texte qu'elle contient, nom de la taille de la page par rapport à celle de la table...

[NoSmoking]

As tu mis une largeur fixe à ta <table> ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.table-largeur-fixe {
  table-layout: fixed;
  width: 60em;          /* valeur fixe */
}

[BartRoX]

Pas directement, car le nombre de colonne est variable.
Et j'utilise également le même fichier CSS pour 2 tables différentes (ayant strictement les mêmes attributs, mais si cela doit changer pour fixer la largeur je le ferai).

J'ai donc un code comme ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
table{
    table-layout: fixed;
}
th{
    width: 130px;
    height: 30px;
    text-align: center;
}
td{
    width: 130px;
    height: 30px;
    text-align: center;
}

J'ai tenté de mettre [table-layout: fixed] dans les td/th mais cela n'a rien changé non plus (je m'y attendais un peu mais bon )

[BartRoX]

Je viens de trouver comment faire ! En utilisant [min-width] à la place de [width].
https://www.w3schools.com/cssref/pr_dim_min-width.asp

Par contre j'ai un problème, j'ai un titre (h1) en haut de ma page qui a un background color et ce dernier s'arrète et ne se poursuit pas quand je scroll...