Mise en page particulière d'un tableau

**Vanger** · 03/01/2008, 04h34

Bonjour. Alors voilà, mon problème est très simple, je cherche à faire un tableau dont la ligne d'entête est plus large que le reste du tableau.

J'ai réussi en faisant des cellules sans bordures sur le côté, mais non seulement je trouve cette méthode pas forcément pratique, mais défois ça provoque des bugs (comme les bordures blanches gauche et droite de la ligne d'entête qui se prolonge sur le côté du tableau). Je pense que ce bug vient de ma technique qui est pas parfaite, mais je vois pas comment faire autrement.

Si vous avez une idée ou si vous savez le faire, j'aimerais bien que vous m'expliquiez la démarche (ne vous cassez-pas la tête à faire un gros exemple codé et commenté, juste une explication de la méthode...

)

Merci à tous!

**BnA** · 03/01/2008, 16h37

Salut!

La solution que j'utiliserai est celle que tu dis avoir essayé (cellules supplémentaires).

Montre voir ton code un peu, histoire de voir ce qui cloche?

**franculo_caoulene** · 03/01/2008, 18h08

Salut,

Tu peux définir une classe pour les cellules aux extrémités et leur définir un padding par exemple.

**Vanger** · 03/01/2008, 19h42

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo pour Developpez</title>
<style type="text/css">
body
{
background-color:black;
}
table
{
width:100%;
border-collapse:collapse;
}
.bordhg, .bordhd, .borddg, .borddd
{
width:0.5%;
}
td
{
border:1px black solid;
border-top:1px;
background-color:red;
}
th
{
border-top:2px white solid;
background-color:orange;
border-right:1px black solid;
}
.bordhg
{
border-left:2px white solid;
border-right:none;
border-bottom:2px white solid;
}
.bordhd
{
border-left:none;
border-right:2px white solid;
border-bottom:2px white solid;
}
.bordh
{
border-right:none;
}
.borddd, .borddg
{
border:none;
background:none;
}
</style>
</head>
<body>
<table>
<tr>
<th class="bordhg"></th>
<th>Case 1</th>
<th class="bordh">Case 2</th>
<th class="bordhd"></th>
</tr>
<tr>
<td class="borddg"></td>
<td>Case 1</td>
<td>Case 2</td>
<td class="borddd"></td>
</tr>
<tr>
<td class="borddg"></td>
<td>Case 3</td>
<td>Case 4</td>
<td class="borddd"></td>
</tr>
</table>
</body>
</html>

Voilà le code qui a permis de faire la tableau que je montre en exemple. J'ai eu beau cherché, j'ai pa trouvé pourquoi il y avait ce fameux bug d'affichage, qui est aléatoire en plus. Défois la page va s'afficher sans le moindre problème, et d'autres fois on va voir apparaître des "bordures folles"...