[CSS] Question surrement simple ? - Histoire div, de centrage, de table

Logiciel & apps Programmation
1

Bonjour a tous.

Merci à tous ceux qui liront mon message pour commencer.

J’ai une petite question CSS qui me tracasse. A mon avis ce n’est pas très compliqué mais ça fait pas mal d’heure que je cherche une solution et j’ai l’impression de tourner en rond.
Voici un petit dessin pour vous expliquer plus rapidement.

Maintenant la légende:

En rouge: un div. Je voudrais qu’il soit centré

En violet, un autre div a l’interieur du 1er. Je voudrais qu’il fasse toute la largeur du 1er div

En bleu, un tableau avec une largeur non fixé, car il s’allongera selon le contenu des cellules.

Ce que je voudrais: Tout simplement que mon 1er div (le rouge) s’allonge autant que le tableaux.
J’avais bien sur pensé à mettre un style “width:1px;” dans le 1er div. Dailleurs cela marche, mais le problème si je fais ça, c’est le 2eme div, qui lui aussi ne fera plus qu’un pixel de large.

Ensuite j’ai enlevé mon width, et j’ai rajouté un float: left.

La ça marche mieux MAIS le div n’est plus centré (forcément) vu qu’il est collé sur la gauche…

Bien sur j’aurais pu tout simplement, à la place du 2eme div rajouté une ligne de plus dans mon tableau, mais je ne peux pas car, je vais utiliser les tag THEAD, TBODY et TFOOT. Ce qui m’obligerait a creer les 2 premieres rangé de type THEAD.

Voila. Merci donc à vous de m’avoir lu, et bonne journée / soirée

2

Pour centrer le contenu: text-align: center (solution de facilité)
Pour centrer le bloc : margin: auto;

Par défaut, les blocs fils (donc tout ce qui utilise display: block) font la taille (width) du parent.

Normalement si le tableau prend plus de place que nécessaire, et si la taille du bloc parent n’est pas fixée, qu’overflow n’est pas utilisée, il peut se passer soit :

le navigateur redimensionne le bloc parent
le navigateur ne fait rien.

Maintenant je vois pas plus.

3

Merci de m’avoir répondu.
Alors en suivant tes conseils, pour le premier div j’ai rajouté margin:auto;.
En rajoutant seulement ca, ca change rien vu que le 1er div prend toute la largeur.
Par contre si je met une taille fixe au div, la il est bien centré mais le 2eme div lui ne prend tj pas toute la largeur (vu qu’il prend la meme taille que j’ai donné au premier div).
Si je rajoute un overflow: auto au 2eme div, la le 1er et le 2eme div font la meme taille mais le tableau depasse des div.

Peut-etre une autre solution?
En tout cas merci! j’appréci beaucoup.

4

L’overflow devrait plutôt aller sur le premier div. Et non, il est assez dur de centrer en CSS (puisque ça dépend de la taille qui n’est pas connue à l’avance).