Discussion :

[moimp]

Bonjour,
J'essaye de fixer la largeur de la première cellule d'une ligne de tableau et ça ne fonctionne pas.
Voici le code source obtenu:

Code html :

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

<tbody><tr><td>1</td><td>Rundes Waschbecken mit Auslass aus Büffelkopf – Wat Loeu – Tamlap</td><td>1931-05-21</td>/*...*/</tr></tbody>

avec le CSS suivant:

Code :

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

1
2
3
4
5
6
7
8
9
.archeology td
{
	min-width:5rem;
	max-width:27rem;
}
.archeology td:first-child
{
	width:2rem;
}

NOTE 1 : Je sais que c'est inhabituel mais je fixe volontairement les largeurs en rem pour que les colonnes se dimensionnent en fonction de la taille des caractères.
NOTE 2 : Question posée après relecture de la page MDN.

[moimp]

J'ai trouvé une solution mais elle ne me satisfait pas car:

• Elle est compliquée et lourde;
• Je ne comprends pas pourquoi la solution en #1 ne fonctionne pas.

Code :

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

1
2
3
4
5
6
7
8
9
.archeology td:not(td:first-child)
{
	min-width:5rem;
	max-width:27rem;
}
.archeology td:first-child
{
	width:2rem;
}

[Doksuri]

tu dis a ton td d'avoir une taille minimal a 5rem, et apres tu veux lui donner une taille de 2rem. il te dira "non, la taille minimal est de 5rem"

ta solution "lourde" fonctionne car du coup, tu cible les autres td comme ayant une taille minimal. tu es donc libre de setter ta taille a 2rem.

Code css :

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

1
2
3
4
5
td {
  min-width: 2rem;
  max-width: 5rem;
}
td:first-of-type { min-width: 2rem; }

[NoSmoking]

Bonjour,
comme dit par Doksuri le min-width prendra le pas sur la width, dans ton premier code il suffirait de « supprimer » l'effet min-width :

Code :

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

1
2
3
4
5
6
7
8
td {
  min-width: 5rem;
  max-width: 27rem;
}
td:first-child {
  width: 2rem;
  min-width: auto;   /* par exemple */
}

On pourrait également le faire à « l'ancienne », sans pseudo-classe :

Code :

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

1
2
3
4
5
6
7
8
/* mode à l'ancienne */
td {
  width: 2rem;
}
td + td {
  min-width: 5rem;
  max-width: 27rem;
}