28106 sujets

CSS et mise en forme, CSS3

Salut à tous, j'ai essayé sans réussir à faire un tableau avec un scroll horizontal, mais en faisant en sorte que la premiere colonne reste... J'ai tenté avec deux tableaux mais pas facile... le tout doit avoir un width inférieur à 500px et le probleme c'est qu'on ne connais pas le width de la première colonne... en fait, ça :
http://www.cssplay.co.uk/menu/tablescroll.html mais dans l'autre sens. Bon je sais pas si c'est réalisable, merci aux éventuels qui chercheront.
Edit: heu en fait même en définissant tous les widths ça m'intéresse finalement.
Modifié par maximb (16 Jun 2006 - 18:24)
Bon alors pour ceux que ça intéresse, je suis arrivé à un résultat satisfaisant (un peu fouillis niveau code mais le résultat est élégant) sous firefox et internet explorer, voir à la page
http://www.globmax.net/reponses
le tableau des réponses.
Problème toujours par contre pour opera et safari: opera affiche le tableau plus bas et pas en entier, safari masque la partie droite du tableau (pas de scroll).
Maintenant, quelle est la meilleure méthode pour afficher une page différente pour safari et opera ? user-agent php ? je vais essayer de mettre ça en place.
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>&nbsp;</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>&nbsp;</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).