Pseudo élément :nth-child non pris en compte

Version imprimable

Bonjour,

Je voudrais limiter la largeur de la troisième colonne d'un tableau mais le CSS concerné n'est pas pris en compte. Il n’apparaît pas dans le débogueur.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Genealium - Votre généalogie en ligne</title>
	<base href="http://genealium.proginet.local/" />
 
	<link rel="stylesheet" media="all" type="text/css" href="css/structure.css" /> <!-- Dimensions et positions -->
	<link rel="stylesheet" media="screen" type="text/css" href="css/style0.css" /> <!-- Apparence -->
	<!-- <link rel="stylesheet" media="print" type="text/css" href="css/print.css" /> --> <!-- Documents imprimés -->
	<link rel="stylesheet" type="text/css" href="css/default_blue.css" /> <!-- Calendrier -->
</head>
 
<body>
 
	<section id="main">
		<div id="left">
			<nav>
				<!-- menu -->
			</nav>
		</div>
		<article id="right">
 
<!-- suite -->
 
<form method="post" action="http://genealium.proginet.local/parentPage.php?childPageKey=11&amp;stage=3" enctype="multipart/form-data" class="L">
	<label for="id">Clef à modifier</label>
		<input type="text" name="id" id="id" value="18" readonly /><br/>
	<table class="request">
		<thead>
			<tr>
				<th><label></label><span class='existingTitle'>Vos informations</span></th>
				<th><span class='existingTitle'>Source / fiabilité</span></th>
				<th><span class='existingTitle'>Valeurs actuelles</span></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><label for='author'>Auteur</label><input type='text' name='author' id='author'  /></td>
				<td></td>
				<td><span class='existingData'>Marc Paris</span></td>
			</tr>
			<tr>
				<td><label for='sources'>Sources</label><textarea name='sources' id='sources' cols='40' placeholder='Indiquer ici les sources qui vous ont permis d'écrire cette biographie (mémoire familiale, article de presse ou sur Internet, etc.)'></textarea></td>
				<td></td>
				<td><span class='existingData'>Profil inventé pour la version démo</span></td>
			</tr>
			<tr>
				<td><label for='text'>Biographie</label><textarea name='text' id='text' cols='40' placeholder='Emplacement réservé pour une courte biographie (10 lignes environ)'></textarea></td>
				<td></td>
				<td><span class='existingData'>Amédée était illettré mais ouvert. Ceci lui a permis d'être à l'écoute de l'instituteur de son fils...</span></td>
			</tr>
		</tbody>
	</table>
 
 
	<p><input type="submit" name="next" value="Suivant" /></p>
</form>
 
<!-- suite -->
 
	</body>
 
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*Code précédent*/
 
/* Page updateQuery.php */
.existingData { /* code pris en compte */
	vertical-align:top;
	font-size:.8rem;
	opacity:0.7;
}
.existingTitle { /* code pris en compte */
	padding:2px 5px;
	font-size:0.8rem;
	text-decoration:underline;
	background-color:rgba(80,80,0,0.8);
	text-align:center;
}
.request td :nth-child (3) { /* code NON pris en compte */
	max-width:200px;
}
 
/* Code suivant */

10/09/2018, 21h03
Invité

Bonjour,

En CSS plus qu'ailleurs, les espaces sont importants.

Là, tu en as mis en trop.

Code:

.request td:nth-child(3) {
10/09/2018, 21h15
moimp
Au départ, je n'avais pas mis cet espace, et je l'ai ajouté parce qu'il est dans le premier exemple de la doc. Avec ou sans espace, le résultat est identique.
J'ai le même problème ici, c'est à dire chaque fois que je sélectionne un élément enfant:
Code:

1 2 3 4 .request thead { height:30px; border:1px solid white; }
10/09/2018, 23h07
Invité
Code:

1 2 3 .request td:nth-child(3) { max-width:100px; }
ça a l'air de fonctionner...

Cela dit : utiliser une <table> pour faire la mise en page de ton formulaire n'est plus du tout d'actualité.
On utilise des <div> pour la mise en page.

N.B. les <table> servent toujours et uniquement pour l'affichage de données tabulaires.

Citation:

Envoyé par moimp

Au départ, je n'avais pas mis cet espace, et je l'ai ajouté parce qu'il est dans le premier exemple de la doc.
Avec ou sans espace, le résultat est identique.

On ne programme pas "au hasard".
Il faut au moins COMPRENDRE.

Tu peux continuer à coder "au petit bonheur la chance"...
... mais tu gagnerais certainement beaucoup de temps en APPRENANT !
- sémantique/usage des balises HTML
- mise en page CSS avec div (sans table)
- le glossaire des propriétés CSS
- ...
11/09/2018, 01h27
badroooo
J'ai testé vite fait ton code, et pour moi le nth-child(3) marche a la perfection.
il faut enlever l'espace entre "td" et le ":"
Mais aussi l'espace entre "child" et "(3)".
Code:

1 2 3 4 .request td:nth-child(3){ max-width: 200px; border: 1px solid green; }
Et puisque c'est la dernière colonne tu peux utiliser :
Code:

1 2 3 4 .request td:last-child{ max-width: 200px; border: 1px solid green; }
11/09/2018, 15h47
moimp

Ah merci, c'est le deuxième espace involontaire entre child et (3) qui était la source d'erreur.
11/09/2018, 16h27
Invité

:bravo:

C'est pas comme si je l'avais écrit dès mon 1er message.... :roll:
11/09/2018, 17h18
moimp

Sauf que j'en avais vu un et pas l'autre:?
11/09/2018, 18h47
Invité

Sauf que je n'ai pas eu de :plusser:..... :calim2:

Eh oui !
Le vieux singe réclame sa cacahuète !! :salive:

Tout comme ma dalmachienne réclame sa croquette !