Tableau HTML avec un scrolling horizontal

**shaun_the_sheep** · 12/04/2008, 10h37

Bonjour,

Je cherche à faire un tableau HTML avec un scrolling horizontal pour qu'il ne dépasse pas de ma page .

J'ai exploré plusieurs pistes:

1) en capsuler mon tableau dans une div avec overflow:'auto' que je ne retiens pas (mon tableau est dans un accordeon openrico)

2) Utilisant la librairie open rico j'ai regardé les 'livegrid' cela ne répond pas à mes attentes

3) Jai testé le script http://javascript.developpez.com/sou...=divers#navtab
qui est très bien. Mais le système de scroll est trop long. Mon tableau est assez long (>50 colonnes) il faut trop cliquer pour aller à la fin.

quelqu'un a t'il un autre truc ? j'aimerai avoir une vrai barre de défilement (ou un curseur).

Merci de votre aide

**shaun_the_sheep** · 12/04/2008, 18h23

Je suis arrivé à ce resultat, si quelqu'un est interressé :

<html>
<head>
<script type="text/javascript" src="./openrico/src/prototype.js"></script>
<script type="text/javascript" src="./scriptaculous-js-1.8.1/src/scriptaculous.js"></script>
</head>

<script type='text/javascript'>

var nbCols = 3;
var startPos = 0;

function initMsqClneTab(idtable)
{
var tble = document.getElementById(idtable);
var tb = tble.getElementsByTagName("tbody")[0];
var lig = tble.getElementsByTagName("tr");

maxCols = lig[0].childNodes.length;

for(var i=0;i<lig.length;i++){
var cells = lig[i].childNodes;

for(var j=nbCols;j<maxCols;j++){
cells[j].style.display = "none";
}
}
}

function sliderOnChange(idtable,startPos)
{
//variables
var tble = document.getElementById(idtable);
var lig = tble.getElementsByTagName("tr"); //-> Renvoie une liste des éléments portant le nom de balise donné.
var maxCols = lig[0].childNodes.length; //-> longeur tableau js contenant une ligne tableau html

for(var i=0;i<lig.length;i++)
{
var cells = lig[i].childNodes;

for(var j=0;j<startPos-nbCols;j++){ //-> masque debut
cells[j].style.display = "none";
}

for(var j=startPos-nbCols;j<startPos;j++){ //-> affiche l'encourt
cells[j].style.display = "";
}

for(var j=startPos;j<maxCols;j++){ //-> masque la fin
cells[j].style.display = "none";
}

}

}
</script>

<body>


<div id="track3" style="width:200px;background-color:#aaa;height:5px;">
<div id="handle3" style="width:5px;height:10px;background-color:#f00;"> </div>
</div>
<p id="debug3"> </p>


<table id='montableau' border='1'>
<tbody>
<tr><td>kgjhfgjkfhgfjh 0</td><td>kgjhfgjkfhgfjh 1</td><td>kgjhfgjkfhgfjh 2</td><td>kgjhfgjkfhgfjh 3</td><td>kgjhfgjkfhgfjh 4</td><td>kgjhfgjkfhgfjh 5</td><td>kgjhfgjkfhgfjh 6</td><td>kgjhfgjkfhgfjh 7</td><td>kgjhfgjkfhgfjh 8</td><td>kgjhfgjkfhgfjh 9</td></tr>
<tr><td>kgjhfgjkfhgfjh 0</td><td>kgjhfgjkfhgfjh 1</td><td>kgjhfgjkfhgfjh 2</td><td>kgjhfgjkfhgfjh 3</td><td>kgjhfgjkfhgfjh 4</td><td>kgjhfgjkfhgfjh 5</td><td>kgjhfgjkfhgfjh 6</td><td>kgjhfgjkfhgfjh 7</td><td>kgjhfgjkfhgfjh 8</td><td>kgjhfgjkfhgfjh 9</td></tr>
<tr><td>kgjhfgjkfhgfjh 0</td><td>kgjhfgjkfhgfjh 1</td><td>kgjhfgjkfhgfjh 2</td><td>kgjhfgjkfhgfjh 3</td><td>kgjhfgjkfhgfjh 4</td><td>kgjhfgjkfhgfjh 5</td><td>kgjhfgjkfhgfjh 6</td><td>kgjhfgjkfhgfjh 7</td><td>kgjhfgjkfhgfjh 8</td><td>kgjhfgjkfhgfjh 9</td></tr>
<tr><td>kgjhfgjkfhgfjh 0</td><td>kgjhfgjkfhgfjh 1</td><td>kgjhfgjkfhgfjh 2</td><td>kgjhfgjkfhgfjh 3</td><td>kgjhfgjkfhgfjh 4</td><td>kgjhfgjkfhgfjh 5</td><td>kgjhfgjkfhgfjh 6</td><td>kgjhfgjkfhgfjh 7</td><td>kgjhfgjkfhgfjh 8</td><td>kgjhfgjkfhgfjh 9</td></tr>
</tbody>
</table>

<script>
window.onload = function()
{

initMsqClneTab('montableau');

new Control.Slider('handle3','track3',{values:[3,4,5,6,7,8,9,10],range:$R(0,10),
onSlide:function(v){previusPos=sliderOnChange('montableau',v)},
onChange:function(v){}});
}

</script>

</body>
</html>

Pour le curseur je me base sur le framework javascript scriptaculous.js.

Cela peut certainement s'optimiser et le scripts peut avoir quelques bugs. Mais il a etait testé sous ie et firefox.

Tableau HTML avec un scrolling horizontal [Rico]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager