Faire un cadre fixe autour d'un grand tableau

Version imprimable

26/12/2011, 15h27
malabarbe

Faire un cadre fixe autour d'un grand tableau

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.

Bonjour,

Code:

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

le CSS devrait faire le reste

26/12/2011, 15h40
malabarbe

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.
26/12/2011, 15h48
Torgar

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

un petit exemple

Code:

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>

Citation:

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 ??

26/12/2011, 16h18
malabarbe
Ok,

En partie good

J'ais mis cela pour voir mieux :
Code:

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.
26/12/2011, 16h24
malabarbe
J'ai changé pour :
Code:

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 !
26/12/2011, 16h27
NoSmoking

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
26/12/2011, 16h32
Torgar

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.

Code:

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>

27/12/2011, 09h56
NoSmoking

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...)