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

**hpfx** · 01/04/2005, 09h02

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 :

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

1
2
3
4
.t2, .t2 TR  {
	border-collapse : collapse;
	border : 1px solid Blue;
}

avec bien sur un tableau comme ceci :

Code :

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

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.

**blueice** · 01/04/2005, 10h15

Fait ca :

Code :

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

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;
}

**hpfx** · 01/04/2005, 10h41

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.

**hpfx** · 01/04/2005, 10h46

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 :

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
 
<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

**blueice** · 01/04/2005, 11h27

Pas de quoi mais je réitère, chez moi ca marche....
Exemple complet :

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
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>

**hpfx** · 01/04/2005, 21h29

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.

**blueice** · 03/04/2005, 16h16

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.

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

CSS

Discussions similaires

Partager

Partager