Rechercher : dans
Par :

Scrollbar dans un tableau

Dernière réponse le 1 jun 2008 à 01:44:16 carolinechotar, le 19 déc 2004 à 17:56:54 
 Signaler ce message aux modérateurs

Bonjour,

je voudrais faire un tableau à dimensions fixes et mettre une scrollbar. comment faire ?

j'ai essayé une formule, j'ai mis un div dans ce tableau, mais l'affichage se fait uniquement en IE, sur mozilla c'est pas net et sur google aucun affichage

voici le code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

-->
</style>
<link href="feuille%20de%20style.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#1302B0">
<table width="760" height="71" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#140277">
  <tr> 
    <td> </td>
  </tr>
</table>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="130" valign="top"><table width="100%" height="455" border="0" cellpadding="0" cellspacing="0" bgcolor="#140277">
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top">,<font color="#FF0000">,,,,,,,,,,,,,,,,,,,</font></td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top">ll<font color="#FF9900">lllllllllllllllllllllllllllllllll</font></td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
        <tr> 
          <td valign="top"> </td>
        </tr>
      </table></td>
    <td width="630" valign="top"><table width="100%" height="455" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td><div class="corps"> 
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td> </td>
                </tr>
              </table>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr> 
                  <td><strong><font face="Arial, Helvetica, sans-serif">Vacances 
                    fabuleuses,magnifique expérience </font></strong></td>
                </tr>
                <tr> 
                  <td> </td>
                </tr>
              </table>
              <p> </p>
              <p> </p>
              <p>  </p>
            </div></td>
        </tr>
      </table></td>
  </tr>
</table>
<table width="760" height="70" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#140277">
  <tr>
    <td><font color="#FF9900">kkkkkkkkkkkkkkkkkkkkkkkkkkk</font></td>
  </tr>
</table>
</body>
</html>


et voici le style du div

.corps {
	background-color: #FFFFE6;
	height: 456px;
	width: 630px;
	overflow:auto;
}

merci pour vos conseils

caro

Meilleures réponses pour « scrollbar dans un tableau » dans :
Trier un tableau sans utiliser la fonction sort VoirTrier un tableau sans utiliser la fonction sort D'abord on initialise une variable $max avec la 1ère valeur de tableau. Ensuite on va faire une boucle tant que le tableau contient encore des éléments. C'est avec la fonction splice qui a le rôle...
Inverser les éléments d'un tableau -Récursivité- VoirVoici une procédure récursive qui permet d’inverser les éléments d’une partie d’un tableau compris entre la position p et n : Procedure Inverser (Var t : Tab; p, n : Integer); Var aux : Real; Begin If p < n Then ...
Tableau de bord VoirNotion de tableau de bord Un tableau de bord est une représentation graphique synthétique d'un ensemble d'indicateurs donnant à un responsable tous les éléments lui permettant de prendre visuellement et rapidement des décisions. Compte-tenu de sa...

1

Car0, le 20 déc 2004 à 21:06:38

Bonjour Caro,

Voici deux sites qui pourront t'aider:
http://openweb.eu.org/articles/overflow_fond_fixe/
http://www.yoyodesign.org/doc/w3c/css2/visufx.html#overflow

je voudrais faire un tableau à dimensions fixes et mettre une scrollbar. comment faire ? 

Idéalement, un tableau devrait être pour présenter des données, pas pour faire de la mise en page. Si la question t'intéresse, fait le tour des articles d'Open web. Tu y trouveras plein de concepts intéressants.


j'ai essayé une formule, j'ai mis un div dans ce tableau, mais l'affichage se fait uniquement en IE, sur mozilla 

Ouch. Il faut savoir que c'est mozilla qui suit les standards. Donc quand tu veux appliquer un overflow fonctionnel et que ça foncitonne sur IE mais pas sur mozilla, c'est que tu exploites un bug de IE et passe à côté de la vraie doc. . Toujours la même référence : Open web :-).

c'est pas net et sur google aucun affichage 

Sur google?? Google fait un truc que je ne connais pas là ;-)

voici le code 

Tout un code :-) Voilà un petit test que j'ai fait de mon côté. Ça ne doit pas être exactement ce dont tu as besoin. J'espère juste que ça pourra t'aider un peu.

Caroline

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Test scrollbar</title>
	<style>
		body{ background-color: #1302B0; text-align:center;}
		div#outer{ width: 760px; height: 600px; background-color:#140277; text-align:left;}
		div#top{ height: 70px;}
		div#left{ float:left;width: 130px; height: 455px;}
		div#right{ float:right; width: 625px; height: 455px; background-color:#FFFFE6; color:black;}
		div#bottom{ height: 70px;}
		#right{ font-weight:bold; font-family: Arial, Helvetica, sans-serif;}
		#right{ overflow:scroll ;}
		.c1, #bottom {color:red;}
		.c2{color:orange;}
		.c1{margin-bottom: 250px;}
	</style>
</head>
<body>

<div id="outer">
	<div id="top"></div>
	<div id="left"><p class="c1">,,,,,,,,,,,,,,,,,,,</p><p class="c2">lllllllllllllllllllllllllllllllllll</p></div>
	<div id="right">Vacances fabuleuses,magnifique expérience</div>
	<div id="bottom">kkkkkkkkkkkkkkkkkkkkkkkkkkk</div>
</div>

</body>
</html>

Répondre à Car0

2

 bluerequin, le 1 jun 2008 à 01:44:16
  • +2

Un truc comme ça ?
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>one</title>
<style type='text/css'>
td.headcol {width:auto;}

</style>
</head>

<body>
<div style="width:100%;overflow:auto;">
<table border="1" style="width:100%;overflow:hidden;">
<tr colspan=5>
<td class='headcol' id='col1'>one</td>
<td class='headcol' id='col2'>two</td>
<td class='headcol' id='col3'>three</td>
<td class='headcol' id='col4'>four</td>
<td style="width:10px;"></td>
</tr>
</table>
<div>
<div style="width:100%;height:200px;overflow-Y:auto;">
<table border="1" style="width:100%;overflow:hidden">
<script type='text/javascript'>
var largcol = new Array()
for (i=1;i<5;i++){
largcol[i]=parseInt(document.getElementById('col'+i).offsetWidth)-3 + "px";
}
for (i=0;i<55;i++){
document.write("\<tr\>\<td style='width:"+largcol[1]+"'\>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf  \<\/td\>\<td style='width:"+largcol[2]+"'\>two\<\/td\>\<td style='width:"+largcol[3]+"'\>three\<\/td\>\<td style='width:"+largcol[4]+"'\>four\<\/td\>\<\/tr\>")
}
</script>
</table>
<div>

</body>

</html>

Répondre à bluerequin
Collection CommentÇaMarche.net