Sujet Précédent Sujet Suivant

Figer 1ere colonne ET 1ere ligne d'un tableau

Fermé
jf69 - 19 janv. 2021 à 07:20
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 - 21 janv. 2021 à 00:04
Bonjour à tous

après 20ans d'absence je me remets à créer un site via Kompozer ...je ne suis pas informaticien et me retrouve bloqué pour figer la 1ere ligne et 1ere colonne de mon tableau et faire défiler le reste....je ne comprends pas toutes les explications y a t il une méthode simple ???
merci pour votre aide

Configuration: Windows / Edge 87.0.664.75
A voir également:

5 réponses

Réponse 1 / 5
Darkos
Modifié le 20 janv. 2021 à 11:42
Saut,
la mise e page se fait avec CSS par dessus le HTML.
Donc il faut apprendre ces 2 langages, un bon moyen non de comprendre mais de savoir faire.
Spolier: ce n'est pas compliqué à comprendre, un peu plus à maîtriser mais pour ça il faut pratiquer et c'est assez simple même s'il faut tâtonner un peu et savoir où chercher les informations nécessaires par rapport à votre demande.

Quant à un tableau ce n'est pas fait pour la mise en page et à éviter si c'est le but sous peine d'être contre-productif sur le référencement du site(un tableau c'est pour les données tabulaires comme une liste d'employés , des résultats de loto sportif etc...).

Kompozer , pas du tout une bonne façon de faire un site de nos jours, passez à un CMS où vous n'aurez pas à toucher au code sauf cas exceptionnel(en vous éloignant du modèle, pour y inclure vos propres scripts de programmations, modifier la mise en page existante etc...).

" figer la 1ere ligne et 1ere colonne de mon tableau et faire défiler le reste..."
je ne sais même pas si c'est possible, en tout cas il y a plus simple qu'avec un tableau qui n'est certainement pas prévu pour puisque un tableau c'est une grille composée de lignes et de colonnes. Chaque ligne et chaque colonne sont situées à la suite comme pour n'importe quelle grille, ça ne correspond juste pas à ce que vous voulez.

Ceci oui par contre:
https://www.w3schools.com/cssref/pr_pos_overflow.asp
0
Réponse 2 / 5
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
20 janv. 2021 à 12:15
Bonjour,

Avec un peu de css et/ou de Javascript il est possible de faire cela
Par exemple

En css:
https://jsfiddle.net/qwubvg9m/1/

En javascript (jquery)
https://jsfiddle.net/RMarsh/bzuasLcz/3/
0
jf69
Modifié le 20 janv. 2021 à 17:55
merci pour cette réponse mais je suis vraiment débutant et je ne vois pas dans le fichier html ou insérer l'appel au fichier javascript .js ou le fichier css, cela n'apparait pas dans ton fichier html et perso je ne sais pas comment integrer ce type de fichier...je dois enregistrer le fichier javascript en .js puis l'appeler avec une balise depuis le thead ou le tbody ???
en plus je dois figer la 1ere ligne ET la premiere colonne..!!
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > jf69
20 janv. 2021 à 18:35
Alors déjà.. ce ne sont pas mes codes .. mes des exemples que j'ai trouvé en deux secondes sur internet...
Donc... ce ne sont que des exemples... à toi de les adapter à tes besoins.


Ensuite, oui il faut ( de préférence) créer un fichier js et un fichier css
ET inclure la librairie JQUERY
Par contre, on évite d'inclure les scripts JS dans le head ( on faisait comme ça il y a 20 ans.. mais plus maintenant..). Désormais, il est conseillé de les inclure juste avant la fin de ton body ( avant le </body> )

Pour inclure jquery, il suffit de ceci 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>


Puis, tu créés un fichier JS pour ton code ( par exemple monjs.js )
Que tu pourras inclure dans ta page ( après le jquery ) comme ceci 
<script src="monjs.js" ></script>

et dedans, mettre le code JS ( qui se trouve dans l'exemple) 
$(document).ready(function(){
  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
  	/*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain 			it's relative position at the left of the table.    
    */
    $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
  });
});

Il te faudra également un fichier css .. par exemple : style.css
qu'il faudra inclure (cette fois tu peux le mettre dans le head ) comme ceci 
<link href="style.css" rel="stylesheet">

et contenent le CSS (également disponible dans l'exemple ) 
table {
  position: relative;
  width: 700px;
  background-color: #aaa;
  overflow: hidden;
  border-collapse: collapse;
}


/*thead*/
thead {
  position: relative;
  display: block; /*seperates the header from the body allowing it to be positioned*/
  width: 700px;
  overflow: visible;
}

thead th {
  background-color: #99a;
  min-width: 120px;
  height: 32px;
  border: 1px solid #222;
}

thead th:nth-child(1) {/*first cell in the header*/
  position: relative;
  display: block; /*seperates the first cell in the header from the header*/
  background-color: #88b;
}


/*tbody*/
tbody {
  position: relative;
  display: block; /*seperates the tbody from the header*/
  width: 700px;
  height: 239px;
  overflow: scroll;
}

tbody td {
  background-color: #bbc;
  min-width: 120px;
  border: 1px solid #222;
}

tbody tr td:nth-child(1) {  /*the first cell in each tr*/
  position: relative;
  display: block; /*seperates the first column from the tbody*/
  height: 40px;
  background-color: #99a;
}


Je précise au passage ... que ce code fait EXACTEMENT ce que tu as demandé ...
ça fixe la première ligne ET la première colonne....

Voila..
0
Réponse 3 / 5
jf69
Modifié le 20 janv. 2021 à 19:33
la grande classe...enfin des explications précises !!!si je comprends bien il faut installer à la fois le fichier .js et le fichier css...je vais regarder cela dans la semaine pro et te tiens au courant...pour mon education personnelle c'est quoi le fichier jquery il déclenche la lecture du javascript ?? dois je le modifier pour l'adapter au niveau cross origin anonymous ??
0
Réponse 4 / 5
jf69
20 janv. 2021 à 19:53
si j'ai bien compris je recopie la ligne pour le jquery telle quelle ensuite je mets mon chemin perso pour src mon fichier .js
y a t il des modifs à faire dans le fichier .js ??? je n'ai pas l'impression
par contre pour le fichier .css je dois adapter les largeur et les hauteurs à ma 1ere ligne et 1ere colonne ainsi que les background logique dois je modifier autre chose ??
désolé mais je m'y remets....c'est pas facile....
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
20 janv. 2021 à 20:37
Jquery est une librairie ( une surcouche) Javascript.
Tu n'as pas à modifier quoi que ce soit là dedans.

Aucune modification non plus dans le fichier js normalement... sauf si tu veux y modifier des choses... mais en l'état il est sensé faire ce que tu as demandé.

Et pour le css.. oui.. tu peux bien entendu l'adapter à tes besoins.
0

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

Posez votre question
Réponse 5 / 5
jf69
Modifié le 21 janv. 2021 à 00:03
voila mon code j'ai enregistrer le fichier scrolljs.js dans le bon repertoire et le fichier style.css egalement et j'ai mis les lignes à priori ou il fallait mais cela ne semble pas fonctionner....


si tu as des idées sur le pb ....
merci d'avance 

<html template="true" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<title>courchevelst</title>
</head>
<body style="width: 959px;">
<table style="text-align: left; width: 1218px;" border="0"
cellpadding="0" cellspacing="0">
<link href="site/javascript/style.css" rel="stylesheet" />
<tbody>
<tr>
<td
style="vertical-align: middle; background-color: rgb(0, 0, 153); text-align: center; height: 123px; width: 230px;"><span
style="color: white;"><img style="width: 68px; height: 68px;" alt=""
src="LOGO2.jpg" /></span></td>
<td
style="vertical-align: top; background-color: rgb(0, 0, 153); height: 130px; text-align: center; width: 984px;"><span
style="color: white;"><big><big><big><big>COURCHEVEL 1650 - MORIOND</big><br />
<small><small><small><br />
<a style="color: white;" href="courchstdom.htm#courchstdom"
target="_top">DOMAINE SKIABLE</a></small></small></small></big></big></big></span><span
style="color: white;"><big><big><big><a
href="courchdomski.htm#courchdomski" target="_top"><small><small><small> </small></small></small> </a>   
<small><small><small>COMMERCES<small>          
<big>ACTIVITES ANNEXES</big></small></small></small></small><br />
</big></big></big></span></td>
</tr>
<tr>
<td
style="vertical-align: top; background-color: rgb(0, 0, 153); width: 200px; text-align: center; height: 572px;"><span
style="color: white;"><br />
<br />
<br />
</span><span style="color: white;"><br />
<span style="color: white;"><br />
<br />
<br />
</span><br />
<br />
<br style="color: white;" />
<big><big><a style="color: white;"
href="courchevelap.htm#courchevelap">APPARTEMENT</a></big></big><br />
<br />
<br />
<big><big><a style="color: white;"
href="courchevelph.htm#courchevelph">PHOTOS</a></big></big><br />
<br />
<br />
<a href="courchevelco.htm#courchevelco"><big><big><span
style="color: white;">CONTACT</span></big></big></a><br />
<br />
<br />
<br />
<big><big><a style="color: white;"
href="courchevelac.htm#courchevelac">ACCUEIL</a></big></big><br />
<br />
<br />
<br />
<br />
</span></td>
<td
style="vertical-align: middle; width: 984px; text-align: center; height: 572px;">lij
l l, llk, l,<br />
<br />
<br />
<br />
<br />
<br />
dgd<br />
dgthg<br />
ghg<br />
hgf<br />
hg<br />
h<br />
g<br />
hgf<br />
hghg<br />
h1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
89<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />
21<br />
22<br />
23<br />
24<br />
25<br />
26<br />
27<br />
28<br />
29<br />
30<br />
31<br />
32<br />
33<br />
</td>
</tr>
<script src="jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous" />
<script src="site/javascript/scrolljs.js" />
</tbody>
</table>
</body>
</html>

Édit: ajout des balises de code

0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
21 janv. 2021 à 00:04
Il faut mettre des liens CSS et JS en dehors de ton tableau.
En plus le lien vers jQuery est faux à moins que tu l'aies téléchargé mais j'en doute...
pour finir, il faudrait que tu regardes dans la console de ton avis gateur pour voir d'éventuelles erreurs.
0

Discussions similaires

Que veut dire "correspondant occupé" lors d'un appel ?
veroaaa -
Pat -

10 réponses