[CSS] Espacement entre cellules (XSL)

**BnA** · 23/11/2006, 14h47

Hello...

Voici mon problème.

J'ai une page XSL (donc dynamique) qui donne comme résultat un tableau (voir ici).

La mise en forme est effectuée via CSS.

J'aimerais avoir un espace plus important entre les "grosses" lignes (rowspan="3", sans influer sur les "sous-lignes"...

J'ai essayé différentes façons, sans jamais parvenir à un résultat autre que celui de l'image...

Bref, voici mes codes:

XSL

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output method="html" indent="yes" encoding="UTF-8"/>
 
	<!-- COPY FROM date.xsl -->	
	<xsl:template name="formatMinuteInHoursAndMinutes">
		<xsl:param name="minutes"/>
		<xsl:param name="sep">:</xsl:param>
		<xsl:value-of select="floor($minutes div 60)"/>
		<xsl:value-of select="$sep"/>
		<xsl:value-of select="round($minutes mod 60)"/>
	</xsl:template>
	<!-- END COPY FROM date.xsl -->
 
	<xsl:template match="/">
		<html>
			<head>
				<title>Reporting</title>
				<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
				<link rel="stylesheet" type="text/css" href="report.css" />
			</head>
			<body>
			<div id="title">
			ELLA Reporting Page
			</div>
				<center><table border="1">
 
					<tr>
						<td class="headOfColumn1">Login</td>
						<td class="headOfColumn1">Name</td>
						<td class="headOfColumn1">Firstname</td>
						<td class="headOfColumn2">Study <br/> language <br/> (last)</td>
						<td class="headOfColumn2">Interface <br/> language</td>
						<td class="headOfColumn2">Time spent <br/> (H:M)</td>
						<td class="headOfColumn2">Time left <br/> (H:M)</td>
						<td class="headOfColumn2">Scores </td>
						<td colspan="2" class="lg">French</td>
						<td colspan="2" class="lg">Dutch</td>
						<td colspan="2" class="lg">English</td>						
						<td colspan="2" class="lg">German</td>
						<td colspan="2" class="lg">Spanish</td>						
					</tr>
 
					<tr>
						<td colspan="8"></td>
						<td width="50px" class="scoreDone">Score</td>
						<td width="50px" class="scoreDone">Done</td>
						<td width="50px" class="scoreDone">Score</td>
						<td width="50px" class="scoreDone">Done</td>
						<td width="50px" class="scoreDone">Score</td>
						<td width="50px" class="scoreDone">Done</td>
						<td width="50px" class="scoreDone">Score</td>
						<td width="50px" class="scoreDone">Done</td>
						<td width="50px" class="scoreDone">Score</td>
						<td width="50px" class="scoreDone">Done</td>
					</tr>
 
					<xsl:apply-templates select="reporting/user"/>
				</table>
				</center>
			</body>
		</html>
	</xsl:template>
 
	<xsl:template match="user">
 
		<tr>
			<td rowspan="3"><xsl:value-of select="@login"/></td>
			<td rowspan="3" class="type1"><xsl:value-of select="personalInformation/name"/></td>
			<td rowspan="3" class="type1"><xsl:value-of select="personalInformation/firstname"/></td>
			<td rowspan="3" class="type2"><xsl:value-of select="studyLg"/></td>
			<td rowspan="3" class="type2"><xsl:value-of select="interfaceLg"/></td>
			<td rowspan="3" class="type2"><xsl:call-template name="formatMinuteInHoursAndMinutes"><xsl:with-param name="minutes" select="timeSpendInMinutes"/></xsl:call-template></td>
			<td rowspan="3" class="type2"><xsl:call-template name="formatMinuteInHoursAndMinutes"><xsl:with-param name="minutes" select="remainingTimeInMinutes"/></xsl:call-template></td>
			<td class="section">
				vocabulary
			</td>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='fr']/score[@type='COM_VOC']"/></xsl:call-template>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='ne']/score[@type='COM_VOC']"/></xsl:call-template>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='en']/score[@type='COM_VOC']"/></xsl:call-template>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='de']/score[@type='COM_VOC']"/></xsl:call-template>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='es']/score[@type='COM_VOC']"/></xsl:call-template>
		</tr>
		<tr>
			<td class="section">
				grammar
			</td>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='fr']/score[@type='GRAM']"/></xsl:call-template>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='ne']/score[@type='GRAM']"/></xsl:call-template>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='en']/score[@type='GRAM']"/></xsl:call-template>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='de']/score[@type='GRAM']"/></xsl:call-template>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='es']/score[@type='GRAM']"/></xsl:call-template>
		</tr>
		<tr>
			<td class="section">
				business
			</td>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='fr']/score[@type='BUSINESS']"/></xsl:call-template>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='ne']/score[@type='BUSINESS']"/></xsl:call-template>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='en']/score[@type='BUSINESS']"/></xsl:call-template>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='de']/score[@type='BUSINESS']"/></xsl:call-template>
			<xsl:call-template name="score"><xsl:with-param name="loc" select="scores/scoresByLg[@lg='es']/score[@type='BUSINESS']"/></xsl:call-template>
		</tr>
 
 
	</xsl:template>
 
	<xsl:template name="score">
		<xsl:param name="loc"/>
		<xsl:choose>
			<xsl:when test="$loc">
 
				<td class="score">
					<center><xsl:value-of select="round((100 * $loc/numerator) div $loc/denominator)"/> %</center>
				</td>
				<td class="score">
					<center><xsl:value-of select="round((100 * $loc/denominator) div $loc/nTotalPoint)"/> %</center>
				</td>		
 
			</xsl:when>
			<xsl:otherwise>
				<td class="score"><center>-</center></td>
				<td class="score"><center>-</center></td>
			</xsl:otherwise>
		</xsl:choose>
 
	</xsl:template>
</xsl:stylesheet>

CSS (tout n'est pas utilisé)

Code CSS :

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
/* CSS Document */
 
      #title{
      font-size:16pt;
      font-family:tahoma, verdana;
      color: #306ba7;
      font-weight:bold;
      text-align:center;
      padding-bottom: 15px;
      }
 
      /*img{
      display:block;
      margin-left:auto;
      margin-right:auto;
      }*/   
 
     table{
      border: 2px solid #306ba7;
      width:90%;
      background-color:#e7f0ff;
      } 
 
      td{
      color:#306ba7;
      font-size:8pt;
      border:1px solid #306ba7;
      font-family:tahoma, verdana;
      background-color:white;
      padding:5px;
      margin-bottom:5px;
      }
 
      .headOfColumn1{
      padding:5px;
      font-weight:bold;
      font-size:12px;
      }
 
      .headOfColumn2{
      padding:5px;
      font-weight:bold;
      font-size:12px;
      text-align:center;
      }
 
      .type1{
      padding-left:5px;
      font-weight:bold;
      }
 
      .type2{
      text-align:center;
 
      }
 
      .section{
      text-align:right;
      }
 
      .score{
      background-color:#e7f0ff;
      }
 
      .lg{
      text-align:center;
      font-weight:bold;
      font-size:12px;}

Merci d'avance à celui (ceux) qui m'aidera(-ront)!!

**Bisûnûrs** · 23/11/2006, 15h10

Je pense que tu peux faire comme ça :

Code CSS :

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

1
2
3
td[rowspan=3]{
   margin-bottom:10px;
}

Mais ça ne fonctionne pas sur IE6.

Ou alors :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
.type1{
   padding-left:5px;
   font-weight:bold;
   margin-bottom:10px;
}
 
.type2{
   text-align:center;
   margin-bottom:10px;
}