[CSS] border-collapse sur les TR mais pas sur les TD.

Version imprimable

01/04/2005, 09h02
hpfx

[CSS] border-collapse sur les TR mais pas sur les TD.
Bonjour,
Je cale sur du CSS.
voilà, j'ai un tableau (avec plusieurs celulles et plusieurs lignes),
ce que je veux faire, c'est simplement : entourer les lignes d'un fin trait (1 px), mais je ne veux pas que les cellules elles même aient une separation visible.
J'y suis arrivé mais ca ne marche qu'avec firefox,
voici mon code CSS :
Code:

1 2 3 4 .t2, .t2 TR { border-collapse : collapse; border : 1px solid Blue; }
avec bien sur un tableau comme ceci :
Code:

1 2 3 4 <table class="t2"> <tr> <td>aaa</td><td>bbb</td><td>ccc</td> </tr> <tr> <td>ddd</td><td>eee</td><td>fff</td> </tr> </table>
important : je ne veux pas qu'entre les lignes on ait un trait de 2 pixels (ou deux trait d'un pixel).
pour ceux n'ayant pas firefox,et pour imaginer ce que je veux : prennez word, mettez un tableau (2 lignes, 3 cols) et retirez les bordure interieures verticales. voilà je veux exactement ca :)

merci pour vos reponses.
PS : en fait je ne sais pas si c'est bien ce que j'ai fais, mais ca marche sous firefox, sous IE je n'ai que la bordure exterieur du tableau.

Fait ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
table {
border-left:1px solid navy;
border-top:1px solid navy;
border-bottom:0;
border-right:0;
}
 
td {
border-right:1px solid navy;
border-left:0;
border-top:0;
border-bottom:1px solid navy;
}

01/04/2005, 10h41
hpfx

désolé, ca ne marche pas comme je veux (ni sous FireFox d'ailleurs)

Ce que tu m'a donnée, fait un truc assez different :
ca laisse les bordures bas et droite au niveau de chacunes des cellules.

ca ne resmeble pas à un tableau word sans les bordures interieurs verticales.

merci quand même.

a force d'acharnement (ouaip ca fait 2 heures que j'y suis) et grace au post blueice (je suis parti sur son idée)
voilà, j'y suis arrivé.
voici le code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <style> table { border:1px solid navy; border-collapse : collapse; } td { border-bottom:1px solid navy; } </style> <table> <tr> <td>aaa</td><td>bbb</td><td>ccc</td> </tr> <tr> <td>ddd</td><td>eee</td><td>fff</td> </tr> </table>
merci encore a blueice

Pas de quoi mais je réitère, chez moi ca marche....
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
68
69
70
71
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
table {
border-left:1px solid navy;
border-top:1px solid navy;
border-bottom:0;
border-right:0;
}
 
td {
border-right:1px solid navy;
border-left:0;
border-top:0;
border-bottom:1px solid navy;
}
 
</style>
</head>
 
<body>
<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

01/04/2005, 21h29
hpfx

blueice : ben c'est parceque j'ai mal du me faire comprendre dans ce que je voulais.

chez moi, le resultat ton code (avec IE5.5 et IE6) ne ressemble pas a ce que donne le mien (aussi avec IE5.5 et IE6 sur deux Pc different)

si tu fais un copier/coller de mon code, est-ce que tu obtiens la même chose que ce que donne le tiens ? (si oui, je ne comprends pas)

et moi ce que je voulais c'est ce que donne mon code. encore une fois, merci quand même : je t'ai piqué ton border-bottom sur le TD, une tres bonne idée !

note : moi il me semble que nosdeux codes ne peuvent pas doner la même chose a cause de ton "border-right:1px solid navy;" sur ton TD : tu aura donc une bordure verticale (a droite) sur chacune de tes cellule : ce que je ne veux pas.
03/04/2005, 16h16
blueice

Ben oui effectivement dans ton cas y a pas de bordure entre chaque...
Je pensais ke tu voulais un tableau avec des cellules de 1px de partout.