28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Juste un peu avant de finir par me décider à venir vous ennuyer, j'ai trouvé ce qui causait mon problème; mais j'aimerais tout de même tenter de comprendre pourquoi ça se produit.

J'avais un tableau de 4 colonnes :


<table width="100%">
<tr>
<td>texte</td>
<td>texte</td>
<td width="80">image</td>
<td width="40">image</td>
</tr>
<table>


Le but étant donc d'avoir une table maximale en largeur, mais avec les deux dernières colonnes de taille fixe.

Et j'avais beau tenter des milliards de chose, mais 4 colonnes avaient une taille identique, 25% chacune.

Sachant que ces tables se remplissent avec divers conteneurs, divers includes, etc, j'ai bien galéré pour finalement trouver une ligne :

<tr>
<td colspan="4" width="100%">texte</td>
</tr>


Si j'enlève le width des paramètres, boum mes deux dernières colonnes reprennent la taille que je leur avais demandé.

Savez-vous pourquoi ce comportement a-t-il lieu ? Pour un colspan entier resize des colonnes splittées ?


Enfin, et plus compliqué : comment forcer les deux premières colonnes à prendre 50% de la largeur restante ?


Merci beaucoup Smiley smile
Bonjour,
Donner une largeur fixe aux de dernières colonnes consiste à les cibler soit par la règle td:nth-of-type(3) et td:nth-of-type(4) soit en leur affectant une classe.
Administrateur
Bonjour,

je n'ai jamais utilisé l'attribut width, uniquement la propriété CSS width... La première est bien dépréciée quand même (pas forcément le choix pour les mails je suppose ?).

2 pistes :
- table-layout: fixed va utiliser un tout autre algorithme de rendu des tables. Dans un cas, le navigateur adapte les cellules à leur contenu en priorité ; dans l'autre cas, il respecte les largeurs indiquées quel que soit le contenu. Et quand le total fait 150% ou 10%, il y a moults mécanismes d'adaptation "au mieux" différents selon la valeur donnée à cette propriété.
- j'ai au moins eu un cas où j'ai dû utiliser l'élément <col> pour faire entendre raison au navigateur... Mais je maîtrise pas, bien content que je suis de pas en avoir besoin tous les jours dans mon boulot d'intégrateur Smiley cligne donc je pourrai pas rentrer dans les détails.
Modifié par Felipe (08 Mar 2013 - 22:12)
Au savoir, de base les colonnes d'un tableau se dimensionne prioritairement d'après leur contenu. Autrement dit, si le contenu est plus grand que la taille de la colonne, celle-ci sera "déformée" pour accueillir ce contenu.

Pour avoir le comportement contraire il faut mettre l'attribut table-layout à la valeur fixed. La colonne conservera alors sa dimension quelque soit le contenu.

Ce qui est intéressant avec cette valeur d'attribut, c'est que des colonnes à la largeur non définit se partageront l'espace restant. On se retrouve donc dans le cas que tu énonces.

Smiley smile