Discussion :

[bilbot75]

Bonjour à tous, je m'adresse à vous parce que je pense que je n'ai pas compris quelque chose dans les selecteurs CSS (je débute :-).
J'ai créé un tableau auquel je souhaite appliquer un style (le tableau1) et ca marche. Mais lorsque je créai un 2nd tableau et son style alors le tableau1 change.
En fait je voudrais des styles différents pour mes 2 tableaux mais il y a des effets de bord.

Voilà ma zone style simplifiée :

Code :

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

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
<style type="text/css">
 
		table#tableau1 {
			margin:0;
			border:1px solid green;
			border-collapse:collapse; 
			font-size: 90%; 
                }
 
		table#tableau1 th,td {
			margin:2px; padding-top:2px; padding-bottom:2px; 
			border:1px solid grey;  
			text-align:center; 
		}
		table#tableau1 tbody tr:nth-child(odd)  {
		    background-color: #2E2E2E;
		}
		table#tableau1 thead tr:first-child  {
		    background-color: #b0b0b0;
		    color : #000000;
		    font-size: 90%;
		}
 
		/*table.tableau2 th,td {margin:0;border:0px ; }*/
 
	</style>

Si je décommente la ligne /*table.tableau2 th,td {margin:0;border:0px ; }*/ alors cela a un effet sur le tableau d'id tableau1

Et là je ne comprend pas pourquoi.

Merci de votre aide.

[saymoneu]

Bonjour,

Ce sont les sélecteurs de ta ligne commentée qui ne vont pas, enfin le 2e (le td).

Code css :

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

table.tableau2 th,td {margin:0;border:0px ; }

En gardant ça, ton sélecteur "td" prend en compte TOUS les td de ta page, alors que tu souhaites seulement prendre en compte ceux de ton tableau2.
Tu dois donc faire :

Code css :

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

table.tableau2 th,table.tableau2 td {margin:0;border:0px ; }

et donc corriger également dans ton tableau1 tu as fait quelque chose du même style sur les td.

[bilbot75]

Grand merci, j'ai enfin compris.