Faire un cadre fixe autour d'un grand tableau

malabarbe · 26/12/2011, 15h27

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, 15h33

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, 15h40

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, 15h48

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, 16h01

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>

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

malabarbe · 26/12/2011, 16h18

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, 16h24

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, 16h27

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, 16h32

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, 16h35

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, 09h56

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

26/12/2011, 15h27	#1
malabarbe Membre habitué Inscription : août 2007 Messages : 639 Détails du profil Informations forums : Inscription : août 2007 Messages : 639 Points : 105 Points : 105	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.
	00

26/12/2011, 15h48	#4
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	Tu as rajouté un overflow: auto; sur ta div ? (je suis pas sûr que ce soit le résultat voulu ) __________________ Vivez vos rêves !!! Si vous voulez que l'on vous aide, postez votre code avec la balise [ CODE ] [ /CODE ] (bouton # de l'éditeur)
	00

26/12/2011, 16h32	#9
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	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. __________________ Vivez vos rêves !!! Si vous voulez que l'on vous aide, postez votre code avec la balise [ CODE ] [ /CODE ] (bouton # de l'éditeur)
	00

26/12/2011, 15h40	#3
malabarbe Membre habitué Inscription : août 2007 Messages : 639 Détails du profil Informations forums : Inscription : août 2007 Messages : 639 Points : 105 Points : 105	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.
	00

26/12/2011, 16h27	#8
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	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
	00

27/12/2011, 09h56	#11
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	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...)
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email