Créer un tableau spécial

**collosus** · 15/08/2013, 10h10

bonjour tout le monde,

je ne sais pas si je suis dans le bon langage, donc dites moi s'il faut que je change de forum.

J'aimerais créer un tableau qui afficherait le détail lorsque que l'on clique sur la ligne principale.

Je m'explique, je souhaite créer un tableau qui compare plusieurs produits. J'aurais donc 5 grandes catégories pour lesquels j'attribue une note. Les internautes s'ils veulent voir le détail de ces catégories devront cliquer sur la ligne principale (avec les notes).

Si vous avez de idées?

Merci beaucoup

**winow** · 15/08/2013, 10h52

bonjour
peut etre cela ?

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
 
<!DOCTYPE html>
<head>
<title>title</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
 
 
<style type="text/css">
a {
  position : relative;
}
a span {
  display : none;
}
a:active span {
  display : block;
  position : absolute;
}
</style>
 
 
</head>
 
 
<body>
  <a href="">Texte toujour affiche<span>texte affiche au clic de souris</span></a>
</body>
 
 
</html>

**Muchos** · 15/08/2013, 17h21

Pourquoi masquer par défaut ces informations ?

En tous cas, l'idée m'a amusé

. Je propose l'utilisation du sélecteur :TARGET. Ex:

Code html :

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
	<meta charset="UTF-8" />
 	<title>L'appeau sur les OS !</title>
	<style type="text/css">
table {
        width: 50%;
        margin: auto;
        text-align: center;
}
td {
        border-bottom: thin dotted #333;
}
.avis {
        display: block;
        position: relative; /* Pour croix de fermeture */
        visibility: hidden; /* Avis masqué par défaut */
        text-align: left;
}
.avis:target {
        visibility: visible; /* Avis visible si sélectionné */
        background: #EDF;
}
.close {
        position: absolute;
        top: 0;
        right: 0;
        border: thin solid black;
        text-decoration: none;
        color: black;
}
        </style>
</head>
<body> 
 
	<table>
		<caption><h1>Comparez nos OS !</h1></caption>
		<tr>
			<th>Système d'exploitation</th>
			<th>Note</th>
		</tr>
		<tr>
			<td>Micrapplux</td>
			<td>
				<a title="Cliquez pour plus de détails." href="#a"><meter value="2" max="5">2 sur 5</meter></a>
				<span class="avis" id="a">
					Pas terrible :(
					<br /> C'était mieux avant®...
					<a class="close" title="Fermer." href="#">×</a>
				</span>
			</td>
		</tr>
		<tr>
			<td>Linicropple</td>
			<td class="note">
				<a title="Cliquez pour plus de détails." href="#b"><meter value="4" max="5">4 sur 5</meter></a>
				<span class="avis" id="b">
					Super :)
					<br /> Ça n'a planté que 6 fois en 3 jours !
					<a class="close" title="Fermer." href="#">×</a>
				</span>
		</td>
		</tr>
	</table>
 
</body>
</html>

**collosus** · 15/08/2013, 19h07

Merci beaucoup
je vais arranger ça à ma sauce.
encore merci

Créer un tableau spécial

HTML

Vue hybride

Discussions similaires

Partager

Partager