css tableau double couleur

Version imprimable

14/05/2012, 16h31
laure07

css tableau double couleur

bonjour,

je cherche un css pour tableau : où je pourrai par exemple avoir les lignes paires en vert et les lignes impéres en rouge ...

merci d'avance
14/05/2012, 16h37
Muchos
Je ne pense pas que ça puisse se programmer en CSS.

Il reste la bonne vieille class :
Code:

1 2 3 tr.pair {background-color: green;} tr.impair {background-color: red;}

Code:

1
2
3
4
5
6
tr:nth-child(odd){
  /* ... */
}
tr:nth-child(even){
  /* ... */
}

15/05/2012, 00h33
Muchos

Citation:

Envoyé par Un type en retard technologique

Je ne pense pas que ça puisse se programmer en CSS.

Perdu mon frère ! Ça s'appelle CSS3, et c'est juste génial :mrgreen:
15/05/2012, 07h55
Bovino

Si ça peut te consoler, tu n'as malgré tout pas tout à fait tort, il faut quand même prévoir une solution alternative pour IE <9 :)
15/05/2012, 09h10
Invité
Bonjour,
toujours friand de m'abreuver à la source du savoir de :hola: Bovino, j'ai bien sûr testé !
Et trouvé ici des exemples très parlants de cette propriété CSS qui m'était jusqu'alors inconnue.
Petit correctif (pas de '...'):
Code:

1 2 3 4 5 6 tr:nth-child(odd){ /* ... */ } tr:nth-child(even){ /* ... */ }
Et je confirme : ça ne fonctionne pas sous I.E.8

Bonjour,

...normalement, s'il a la possibilité d’utiliser jQuery ca devrait etre bon avec ca :

Code:

1
2
3
4
5
6
7
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#tableau tr:even").addClass("color1");
        $("#tableau tr:odd").addClass("color2");
    });
</script>

exemple complet :

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
65
66
67
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#tableau tr:even").addClass("color1");
        $("#tableau tr:odd").addClass("color2");
    });
</script>
<style type="text/css">
td {
	width:200px;
	padding:0px 10px;
}
th {
	background-color:grey;
}
.color1 {
    background-color:red;
}
.color2 {
    background-color:green;
}
</style>
</head>
<body>
<table id="tableau">
	<thead>
	<tr>
      <th>Lignes</th>
      <th>Random texte</th>
  </tr>
  </thead>
  <tbody>
  <tr>
      <td>Ligne 1</td>
      <td>Nabijheid</td>
  </tr>
  <tr>
      <td>Ligne 2</td>
      <td>scheidden</td>
  </tr>
  <tr>
      <td>Ligne 3</td>
      <td>om britschen</td>
  </tr>
  <tr>
      <td>Ligne 4</td>
      <td>de inkomsten</td>
  </tr>
  <tr>
      <td>Ligne 5</td>
      <td>in moerassen</td>
  </tr>
  <tr>
      <td>Ligne 6</td>
      <td>Behoorden </td>
  </tr>
  <tr>
      <td>Ligne 7</td>
      <td>nu in brandstof</td>
  </tr>
  </tbody>
</table>
</body>
</html>

14/06/2012, 16h49
laure07

Merci Ssi Amine...ca marche nickel...
je me demande comment faire si je veux que le premier <tr> soit une couleur apart color1 et color2?

Réponse un mois après, avec solution JQuery retenue… :roll:

Enfin bref ! Pour le premier tr en ROSE PÉTANT \o/ par ex., ce pourrait être :

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
 
<!doctype html>
<html>
	<head>
		<style type="text/css">
                tr:first-child {color: DeepPink;}
                </style>
	</head>
 
	<body>
		<table>
			<tr>
				<td>foo</td>
				<td>bar</td>
			</tr>
			<tr>
				<td>foo</td>
				<td>bar</td>
			</tr>
			<tr>
				<td>foo</td>
				<td>bar</td>
			</tr>
		</table>
	</body>
</html>