Figer la premiere ligne d'un tableau html

willy -  
bixente2 Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -
Slaut les gars !
Je voudrais afficher mes pages web dans un tableau.Le hic, c'est que kan le tableau est trop grand il provoque un defilement vertical. mon prbleme est ke si je vais a la fin du tableau, je perd l'entete. Est il possible de figer 1e ou quelque ligne du tableau. (l'entete)

Ps: le site est contruit www.wassi.ci/ et le fait de me dire d'utilser les frames en remplacement du tableau ne me plait pas pour des raisons techniques.
A voir également:

7 réponses

Réponse 1 / 7
Napjea
 
Si tu veux le faire en pure html et css, je l'ai fait y'a pas longtemps si tu veux ==> opérationnel sur Mozilla et IE le chieur.
Y'a du script aussi pour coloré une ligne sur deux pour mieux se repérer...
Voilà bisouSS
6
eyams
 
Je suis intéressé par la solution pure HTML/CSS. Elle est disp qquepart ?
Merci.
0
Réponse 2 / 7
slolo2000 Messages postés 315 Date d'inscription   Statut Membre Dernière intervention   48
 
J'ai fait un truc qui devrait pouvoir t'aider mais ce n'est pas forcément la meilleure solution (mais c'est la seul que j'ai trouvé)

- Tu fais une table pour l'entête de ton tableau en spécifiant la largueur des colonnes (c'est important)
- Tu fais une autre table (avec la même largeur de colonne) que tu englobes dans un div avec le style suivant:
.divForLook
{
overflow: scroll;
width:100%;
height:400;
}

Comme ça tu as un tableau qui a toujours la même taille dans lequel tu fais scroller le contenu (grâce au div)

Suis-je clair ?

A+
4
Réponse 3 / 7
bixente2 Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   3
 
Salut Bill17

Effectivement j'ai fourché, minfle. Pour que ça fonctionne il faut spécifier le <tbody> en "block" dans le style CSS. N'oubli pas aussi de lui spécifier la hauteur comme j'avais indiqué.
Il faut bien cadrer les dimensions de tes <thead> et <tbody> pour que les colonnes puissent bien s'aligner, et autres styles CSS pour la mise en page.
Ca donne : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML>
<HEAD>
<style>
.ta_classe
{
overflow: auto;
display: block;
height: 100px;
width: 500px;
}
.cl2
{
height: 20px;
width: 500px;
display: block;
}
td
{
width: 100px;
}

</style>
</HEAD> 
<BODY> 
<table> 
<thead class="cl2">
<tr><td>ent 1</td> <td>ent 2</td> <td>ent 3</td> <td>ent 4</td> <td>ent 5</td></tr>
</thead> 

<tbody class="ta_classe"> 
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> 
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> 
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> 
...répéter 200 fois 
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> 
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> 
</tbody> 
</table> 
</BODY> 
</HTML>
3
Réponse 4 / 7
Bixente
 
Bonjour à tous,
Je sais que j'arrive qq années après la bataille, mais ça peut servir pour ceux qui comme moi cherchent aussi une solution (10/03/2011).
Garder figer les entêtes de colonne et faire défiler le corps du tableau est un jeux d'enfant, en html/css pur et dur :
1/ Englober les entêtes de colonne dans <thead></thead>
2/ Englober le reste du tableau dans <tbody></tbody>
Attribuer un classe CSS à <tbody> :
.ta_classe
{
height: 300px;
overflow: auto;
}
Et voilà, on peut pas plus simple :)
A+
2

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
bill17
 
Bonjour, Bixente

J'ai essayé ce que tu dis, mais ça ne fonctionne pas du tout. Peut être qu'il manque quelque chose dans ton expliaction. Voici mon ti bout de code .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD> <style> .ta_classe { overflow: auto; } </style> </HEAD>
<BODY>
<table>
<thead> <tr> <td>ent 1</td> <td>ent 2</td> <td>ent 3</td> <td>ent 4</td> <td>ent 5</td> </tr> </thead>

<tbody class="ta_classe">
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr>
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr>
...répéter 200 fois
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr>
</tbody>
</table>
</BODY>

</HTML>
1
Réponse 6 / 7
mital sluqa
 
salut,
je suis nouveau dans la discution bon je peux savoir ou je peu trouver des cours pour excel,
0
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Bonjour nouveau et bienvenue,

Pour bien faire, il faut que tu évites de poser tes questions n'importe où.
Utilise plutôt un nouveau message bien à toi dans le bon forum.
Merci.

--
0
Réponse 7 / 7
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Bonjour,

Essaye de corriger d'abord les erreurs de ta page.
Par exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>GROUPE WASSI - </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Technologies,Web Consulting, Micro-informatique,Kendrydh,Maintenance et réseau ,Développement Web
,Formation,côte d'Ivoire,Omaurier,Conseils et Ingénieurie">

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<!--Performed by RZA : Rozel Audric KOUADIO : http://www.divinetwork.com-->
<link href="css/omi_style.css" rel="stylesheet" type="text/css">
</head>

<body topmargin="0" bottommargin="0">


  du code  du code  du code  du code  du code  du code  du code  du code


                <td height="18" valign="top">
                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/omi_style.css" rel="stylesheet" type="text/css">
<!--Performed by RZA : Rozel Audric KOUADIO : http://www.divinetwork.com-->
</head>

<body>


Ensuite, de quel tableau parles-tu ?
Il y en a 16.

--
0