Faire un cadre fixe autour d'un grand tableau

**malabarbe** · 26/12/2011, 16h27

Bonjour à tous,

J'ai un grand tableau contenu dans une Div.
Ce tableau a une bordure.

Mais, quand je scrolle, bien sur la bordure du haut disparait.

Je voudrais qu'elle soit toujours apparente.

L'idée, serai d'inclure ce tableau dans une Div avec une bordure
qui elle resterai fixe.

C'est l'idée, mais je ne sait pas faire.

Un conseil serai le bienvenu.

**NoSmoking** · 26/12/2011, 16h33

Bonjour,

Code html :

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

1
2
3
4
5
6
7
<div>
  <table>
    <!--
    le reste du code de la table
    -->
  </table>
</div>

le CSS devrait faire le reste

**malabarbe** · 26/12/2011, 16h40

Bonjour NoSmoking,

Oui, j'ai fait cela avec une bordure au Div,

mais quand je scrolle, tout remonte et je ne vois
plus la bordure suppérieure.

Le but, c'est que quel que soit ma position
dans le tableau, la bordure soit toujours visible.

**Torgar** · 26/12/2011, 16h48

Tu as rajouté un overflow: auto; sur ta div ? (je suis pas sûr que ce soit le résultat voulu

)

**NoSmoking** · 26/12/2011, 17h01

un petit exemple

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Table]</title>
<style type="text/css">
div {
  height : 301px;
  width : 401px;
  overflow-y : scroll;
  overflow-x : hidden;
  border : 1px solid black;
}
table {
  border : 0;
  border-collapse : collapse;
}
td {
  width : 200px;
  height : 50px;
  border : 1px solid black;
}
</style>
</head>
<body>
<div>
  <table>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
  </table>
</div>
</body>
</html>

Le but, c'est que quel que soit ma position
dans le tableau, la bordure soit toujours visible.

mais un doute m'assaille, qu'appelles tu bordure du haut ??

**malabarbe** · 26/12/2011, 17h18

Ok,

En partie good

J'ais mis cela pour voir mieux :

Code :

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

1
2
 
  <Div style="border-width:10px; border-style:dotted; border-color:black; ">

Au départ, bordure bas et droite non affichées.

En bas de tableau, bordure haut et droite non affichées.

Déjà merci, mon affaire avance.

**malabarbe** · 26/12/2011, 17h24

J'ai changé pour :

Code :

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

1
2
 
  <Div style="border-width:10px; border-style:dotted; border-color:black; position:fixed">

La tout est bon sauf que la bordure de droite
ce trouve a droite de l'ascensseur !

**NoSmoking** · 26/12/2011, 17h27

il serait peut être temps que tu nous mettes ton code HTML car j'ai du mal à visualiser le problème.
border : 10px dotted black; est équivalent à
border-width:10px; border-style:dotted; border-color:black; position:fixed

**Torgar** · 26/12/2011, 17h32

Je pense que c'est normal puisqu'il met une bordure sur une div qui contient un bloc avec scroll. Donc forcément, le scroll sera toujours dans la div encadrée.

**malabarbe** · 26/12/2011, 17h35

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
 
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Table]</title>
<style type="text/css">
div {
  height : 301px;
  width : 401px;
  overflow-y : scroll;
  overflow-x : hidden;
  border : 1px solid black;
}
table {
  border : 0;
  border-collapse : collapse;
}
td {
  width : 200px;
  height : 50px;
  border : 1px solid black;
}
</style>
</head>
<body>
	<DIV class="div1" style="width: 1004px; height: 76px">
		<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
			<tr>
				<td>
					<p align="center">
						<img border="0" src="images/ent-trombi.gif" width="464" height="73">
				</td>
			</tr>
		</table>
	</DIV>
 
	<Div style="border-width:10px; border-style:dotted; border-color:black; position:fixed">
		<table >
    		<tr><td></td><td></td><td>&nbsp;</td></tr>
    		<tr><td></td><td></td><td>&nbsp;</td></tr>
    		<tr><td></td><td></td><td>&nbsp;</td></tr>
    		<tr><td></td><td></td><td>&nbsp;</td></tr>
    		<tr><td></td><td></td><td>&nbsp;</td></tr>
    		<tr><td></td><td></td><td>&nbsp;</td></tr>
    		<tr><td></td><td></td><td>&nbsp;</td></tr>
    		<tr><td></td><td></td><td>&nbsp;</td></tr>
    		<tr><td></td><td></td><td>&nbsp;</td></tr>
    		<tr><td></td><td></td><td>&nbsp;</td></tr>
  		</table>
	</div>
</body>
</html>

**NoSmoking** · 27/12/2011, 10h56

dans ce cas mets les bordures right et left de la DIV à 0 et les bordures équivalentes de la TABLE actives.

nota : il faut prendre le partie de mettre le nom des balises ne minuscule et de ne pas faire de patchwork.( DIV, Div...)

Faire un cadre fixe autour d'un grand tableau

HTML

Discussions similaires

Partager

Partager