poupette avait besoin de cette méthode, je poste ici la réponse que je lui ai envoyé.
========
Alors bon donc le code que j'ai produit n'est pas d'une extrême beauté, plusieurs éléments sont probablement superflus.
Mais bon je t'envoies ce que j'ai fait, qui marche d'ailleurs donc je ne me plains pas.
Par contre, ça ne marche pas sous safari et opera. Safari masque la partie droite du tableau sans afficher de barres de défilement. Opera essaye de caser le tableau en dessous, sans barre de défilement. J'ai essayé d'ailleurs d'envoyer une page spéciale plus simple pour ces deux navigateurs, sans succès, mais bon pas tellement important pour moi, et puis ça devrait tout de même être faisable si nécessaire.
Alors voici la méthode pour un tableau de 3 cases de hauteur et 4 cases de largeur avec une limite en largeur de 300px :
Commencer par créer un div qui contiendra le tout. Sa largeur sera définie dans le css.
<div id="containtbl">
</div>
Créer un tableau de 3 cases de hauteur et une case de largeur: ce sera le tableau contenant les intitulés des lignes. Lui donner l'id "topcol" par exemple. Le placer lui-même dans un div d'id "tablheader".
<div id="containtbl">
<div id="tablheader">
<table id="topcol" cellspacing="0">
<tr class="th1b">
<td> </td>
</tr>
<tr>
<td>Ligne 1</td>
</tr>
<tr>
<td>Ligne 2</td>
</tr>
</table>
</div>
</div>
La première ligne de ce tableau est vide. Elle a la classe "th1b" pour être d'une autre couleur que les autres.
Créer un deuxième tableau "rightbl" qui contiendra les intitulés des colonnes et toutes les données. Dans notre cas, un tableau de 3 cases de hauteur et 3 de largeur. Le placer en dessous du div "tablheader", dans un autre div : "rightable".
<div id="containtbl">
<div id="tablheader">
<table id="topcol" cellspacing="0">
<tr class="th1b">
<td> </td>
</tr>
<tr>
<td>Ligne 1</td>
</tr>
<tr>
<td>Ligne 2</td>
</tr>
</table>
</div>
<div id="rightable">
<table id="rightbl" cellspacing="0">
<tr class="th1b">
<td class="th1">Colonne 1</td>
<td class="th1">Colonne 2</td>
<td class="th1">Colonne 3</td>
</tr>
<tr>
<td>1*1</td>
<td>1*2</td>
<td>1*3</td>
</tr>
<tr>
<td>2*1</td>
<td>2*2</td>
<td>2*3</td>
</tr>
</table>
</div>
</div>
Voila, le code html est prêt. Maintenant, problèmes à résoudre :
- faire en sorte que les deux tableaux soient l'un à côté de l'autre : on va le faire en faisant flotter le premier à gauche
- faire en sorte qu'ils aient chacun une largeur définie, par exemple 100px pour le premier qui contient les intitulés.
Largeur du deuxième tableau : Il faut spécifier la largeur de toutes les colonnes du deuxième tableau.
On va par exemple réserver 80px par colonne
80*3=240
Le deuxième tableau doit faire 240 pixels de large en total.
- par contre le div qui contient le deuxième tableau ne doit pas mesurer 240px de large mais 300-100 (pour la première colonne) = 200px de large.
- Ensuite il faut faire apparaître les scroll sur le div qui contient le deuxième tableau grâce à la propriété oversflow-x: scroll;
- Enfin, donner du style et des couleurs.
Et voila le code css final, un peu bordélique il faut l'admettre :
<style type="text/css">
#containtbl table#rightable, #containtbl table#topcol {
background-color: #F0FCFF;
border: none;
vertical-align: middle;
}
#containtbl #rightable td, #containtbl #topcol td {
font-size: 12px;
color: #000000;
width: 100px;
border-bottom: solid #AAA 1px;
text-align: right;
height: 25px;
}
#containtbl #rightable td {
width: 80px;
text-align: center;
}
#containtbl .th1 {
width: 80px;
}
#containtbl #rightable td {
border-left: solid #AAA 1px;
}
#containtbl .th1, .th1b {
background-color: #FEEECF;
}
#containtbl {
margin-left: auto;
margin-right: auto;
display: inline;
width: 300px;
}
#containtbl #tablheader {
float: left;
}
#containtbl #rightable {
width: 200px;
overflow-x: scroll;
overflow-y: hidden;
}
#containtbl #rightbl {
width: 240px;
}
</style>
La manière dont j'ai codé le css semble très aléatoire, mais bon c'est par tâtonnements et éliminations jusqu'à ce que ça marche convenablement, donc essaye de faire plus propre si tu le peux.
Faire apparaitre un scroll horizontal: je pense que c'est possible. La technique est environ similaire, mais en vertical. Il faut spécifier les hauteurs de toutes les cellules et calculer par multiplication la hauteur totale. Il faut séparer les intitulés des colonnes dans un tableau et un div à part. et il faut faire un overflow:y: scroll; dans toute la partie basse du tableau.
C'est bien plus compliqué mais tu pourrais y arriver.
Le rendement marche sous internet explorer et est parfait sous firefox (pas de petit espace).
