Faire que les bordures d'un tableau soient uniquement sur les colonnes

**Exagone313** · 30/03/2011, 21h11

Bonjour, j'aimerais savoir comment faire un tableau sous cette forme (en utilisant le plus possible de css) :

Merci pour votre aide.

**Nesmontou** · 30/03/2011, 21h36

Bonsoir,

Quelque chose comme ci-dessous devrait faire l'affaire.

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
<!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>
		<title>Table</title>
 
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
 
			body, html {
				height: 100%;
				width: 100%;
			}
 
			table {
				border-collapse: collapse;
			}
 
			table thead tr th {
				border-bottom: 1px solid #000000;
				border-left: 1px solid #000000;
			}
 
			table thead tr th:first-child {
				border-left: none;
			}
 
			table tbody tr td {
				border-left: 1px solid #000000;
			}
 
			table tbody tr td:first-child {
				border-left: none;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>colonne 1</th>
					<th>colonne 2</th>
					<th>colonne 3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>cellule 1</td>
					<td>cellule 2</td>
					<td>cellule 3</td>
				</tr>
				<tr>
					<td>cellule 1</td>
					<td>cellule 2</td>
					<td>cellule 3</td>
				</tr>
				<tr>
					<td>cellule 1</td>
					<td>cellule 2</td>
					<td>cellule 3</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Bon développement

**Exagone313** · 30/03/2011, 22h03

La partie sous tbody fonctionne parfaitement, mais sous thead aucune bordure. Je vais voir si je peux arranger ça ...

EDIT : pas vu les th ...
ça fonctionne, j'ai enlevé le gras de th.

Faire que les bordures d'un tableau soient uniquement sur les colonnes

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager