Discussion :

[malbaladejo]

Bonjour à tous,

Je cherche à afficher un tableau avec un cadrillage bleu de 1 pixel de large.
Ca parrait simple mais après plusieurs essais je n'arrive pas le faire en css.
Le code suivant donne exactement le résultat que je cherche et je voudrais la même chose en css :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 <table cellspacing="0" cellpadding="2" border="1" style="border-collapse:collapse" bordercolor="#346699" width="200">
  <tr class="typobleu1" align="center"> 
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class="typobleu1" align="center"> 
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  </table>

J'ai essayé :

Code :

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

1
2
3
4
.cadrebleu
{
    border:1px solid #346699
}

Dans ce cas le tableau est encadré mais pas les cases.

Pouvez-vous m'aider ?

[Google.be]

Essaye ceci :

Code :

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

1
2
3
4
 
td, th {
border:1px solid #346699
}

[malbaladejo]

Merci.

Mais je n'y arrive toujours pas.
Le code que tu me donnes encadre chaque td. Si je fais un bord de 1px par cellule je me retrouve donc avec des bordures de 2px.

[adiGuba]

Salut,


C'est normal que le nom du style CSS ne correspond pas à celui de ton code HTML ???

Sinon une solution 100% CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<table class="cadrebleu">
<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
</tr>
<tr>
	<td>4</td>
	<td>5</td>
	<td>6</td>
</tr>
</table>

avec le style suivant :

Code :

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

1
2
3
4
5
6
7
8
9
.cadrebleu {
	border-collapse: collapse;
	width: 200;
}
.cadrebleu td {
	text-align: center;
	border: 1px solid #346699;
	padding: 2;
}

a++

[malbaladejo]

Merci, c'est parfait.