équivalent cellpadding, cellspacing et border

Version imprimable

Bonjour,

je voudrais faire un équivalent de

Code:

<table cellpadding="0" cellspacing="0" border="1"></table>

j'ai vu quelque part que je pouvais faire ça avec border-collapse et border-spacing.

J'ai donc fait un exemple avec 2 tableaux et ça marche avec l'un mais pas avec l'autre :? .

voici mon code :

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 PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Exemple</title>
 
<style type="text/css">
  table.arbre,table#en_tete
  {
    border-spacing : 0px;
    width : 100%;
    border-collapse:collapse;
  }
 
  table.arbre,table#en_tete td
  {
    border :1px solid black;
  }
</style>
</head>
<body onload="">
<table id="en_tete" >
  <thead>
    <tr>
      <td colspan="5" width="400px">Libe</td>
 
      <td colspan="2">R</td>
      <td colspan="2">V</td>
    </tr>
    <tr>
      <td colspan="5">&nbsp;</td>
      <td class="r_ca_p">CA P</td>
      <td class="r_ca_r">CA R</td>
 
      <td class="vendu_ca_ppht">CA P</td>
      <td class="vendu_ca_remise">CA R</td>
    </tr>
  </thead>
</table>
<div id="arbre1">
  <table id="arbre_arbre1" class="arbre" >
    <tbody></tbody>
    <tbody></tbody>
    <tbody class="tbody_niveau_1" id="1LI">
      <tr class="ligne_niveau_1">
        <td width="400px" id="styleId_libelle_niveau_1" class="libelle" colspan="5"><a href="#"><img alt="" style="height: 18px; width: 18px;" src="arbre/plus.gif"></a>libelle 1LI</td>
        <td class="valeurs_2" id="styleId_valeurs_2_niveau_1">1000</td>
        <td class="valeurs_3" id="styleId_valeurs_3_niveau_1">2000</td>
        <td class="valeurs_4" id="styleId_valeurs_4_niveau_1">3000</td>
        <td class="valeurs_5" id="styleId_valeurs_5_niveau_1">4000</td>
      </tr>
    </tbody>
    <tbody class="tbody_niveau_1" id="2LI">
      <tr class="ligne_niveau_1">
        <td id="styleId_libelle_niveau_1" class="libelle" colspan="5"><a href="#"><img alt="" style="height: 18px; width: 18px;" src="arbre/plus.gif"></a>libelle 2LI</td>
          <td class="valeurs_2" id="styleId_valeurs_2_niveau_1">1002</td>
          <td class="valeurs_3" id="styleId_valeurs_3_niveau_1">2002</td>
          <td class="valeurs_4" id="styleId_valeurs_4_niveau_1">3002</td>
          <td class="valeurs_5" id="styleId_valeurs_5_niveau_1">4002</td>
      </tr>
    </tbody>
  </table>
</div>      
</body>
</html>

quelqu'un saurait me dire pourquoi ?

merci d'avance

PoichOU

15/06/2007, 09h43
Bisûnûrs

padding et margin
15/06/2007, 09h47
PoichOU

merci de ta réponse Bisûnûrs mais je n'ai pas trop compris :?

sur quoi je dois mettre un padding et margin ? j'ai essayé sur les td mais sans succès :cry:

Code:

1
2
3
4
5
#tontableau td{
   border:1px solid #000;
   padding:0;
   margin:0;
}

Code:

1
2
3
4
5
6
7
8
9
10
<table id="tontableau">
   <tr>
      <td>Texte<td>
      <td>Texte<td>
   </tr>
   <tr>
      <td>Texte<td>
      <td>Texte<td>
   </tr>
</table>

Bisûnûrs ton exemple ne marche pas !

par contre le code suivant marche :

Code:

1
2
3
4
5
6
7
#tontableau {
    border-spacing : 0px;
    border-collapse:collapse;
}
#tontableau td{
   border:1px solid #000;
}

Code:

1
2
3
4
5
6
7
8
9
10
<table id="tontableau">
   <tr>
      <td>Texte<td>
      <td>Texte<td>
   </tr>
   <tr>
      <td>Texte<td>
      <td>Texte<td>
   </tr>
</table>

Par contre ça m'a fait trouvé la soluce à mon problème, voilà la ligne qui n'allait pas :

Code:

1
2
3
4
5
6
7
<table id="arbre_arbre1" class="arbre" >
 
    <tbody></tbody>
 
    <tbody></tbody>
 
...

voilà par quoi il faut remplacer :

Code:

1
2
3
4
5
6
7
<table id="arbre_arbre1" class="arbre" >
 
    <tbody style="display:none"></tbody>
 
    <tbody style="display:none"></tbody>
 
...

merki ;)

PoichOU

10/12/2007, 00h48
lvr

Faudrait ajouter cette histoire de border-collapse dans le FAQ !
10/12/2007, 09h38
PoichOU

c'est pas faux ! :D