Scrollbar dans un tableau

carolinechotar, le dimanche 19 décembre 2004 à 17:56:54

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

Répondre à carolinechotar Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Car0, le lundi 20 décembre 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

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

bluerequin, le dimanche 1 juin 2008 à 01:44:16

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

Posez votre question Répondre

[CSS] overflow : scroll (Résolu) Scroll bar en php JavaSscript : forcer scrollbar ds un div Forcer un scrollbar horizontal dans un div

Trucs & astuces pertinents trouvés dans la base de connaissances

29/10 12h46	Trier un tableau sans utiliser la fonction sort	Perl
11/01 11h08	Décaler les éléments d'un tableau (Rotation) -Récursivité-	Pascal
11/01 11h21	Inverser les éléments d'un tableau -Récursivité-	Pascal
24/05 06h49	L'indexation linéaire et le reshape sous Matlab	MatLab
29/10 12h20	Figer une ligne	Excel

Plus d'astuces sur « scrollbar dans un tableau »

Discussions pertinentes trouvées dans le forum

19/06 11h28	Récuperer valeur scrollbar d'un tableau	1
02/04 16h30	Tableau avec scrollbar : help !	2
13/06 17h05	Scrollbar en java dans un tableau ?????	0
20/08 00h47	Affichages images dans un tableau	2

Plus de discussions sur « scrollbar dans un tableau »

Logiciels pertinents trouvés dans les téléchargements

	MediaInfo - MediaInfo fournit la liste des codecs nécessaires ainsi que des informations techniques sur vos fichiers vidéo et audio. ...	Catégorie: Codecs Licence: Open Source
	PSPad - PSPad est un excellent éditeur de texte. Il est utile pour travailler sur du simple texte, mais aussi sur du HTML, CSS,...	Catégorie: Développement Licence: Freeware/gratuit
	NVU - NVU est un éditeur HTML WYSIWIG (What You See Is What You Get) libre, c'est-à-dire un logiciel permettant de créer...	Catégorie: Editeurs HTML Licence: Open Source
	Online Armor Personal Firewall - Online Armor est un Firewall + un IDS Uniquement en anglais - pour l'instant - mais complet et entièrement gratuit. ...	Catégorie: Firewall Licence: Freeware/gratuit

Plus de logiciels gratuits sur « scrollbar dans un tableau »