Scrollbar dans un tableau
carolinechotar
-
clark -
clark -
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
et voici le style du div
merci pour vos conseils
caro
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
A voir également:
- Scrollbar dans un tableau
- Tableau word - Guide
- Trier un tableau excel - Guide
- Imprimer un tableau excel - Guide
- Tableau ascii - Guide
- Dans le fichier, générez ce tableau automatiquement (tableau croisé dynamique ou table de pilote) à partir des quatre premières colonnes. - Guide
3 réponses
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>
<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>
clark
C'est du copier coller dur et tu ne sais même pas ce que fait ce code.
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
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.
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 :-).
Sur google?? Google fait un truc que je ne connais pas là ;-)
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
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>
Salut,
je réveille la discussion avec une solution "2012" plus simple - à légèrement adapter pour IE (ou pas; pourquoi ne pas laisser les utilisateurs IE se passer de scrolling...).
L'explication pas à pas :
http://journaldudoj.blogspot.fr/2012/06/comment-faire-un-tableau-scrollable.html
Le résultat final :
je réveille la discussion avec une solution "2012" plus simple - à légèrement adapter pour IE (ou pas; pourquoi ne pas laisser les utilisateurs IE se passer de scrolling...).
L'explication pas à pas :
http://journaldudoj.blogspot.fr/2012/06/comment-faire-un-tableau-scrollable.html
Le résultat final :
<style>
#ministres thead {
display:block;
}
#ministres tbody {
display:block;
height:5em; /* 5 times the equivalent of a text "size". */
overflow-y:scroll;
}
#ministres thead tr th:nth-child(1) { /* column 1 ! */
width:5em;
}
#ministres thead tr th:nth-child(2) { /* column 2 */
width:10em;
}
#ministres tbody tr:first-child td:nth-child(1) { /* column 1 ! */
width:5em;
}
#ministres tbody tr:first-child td:nth-child(2) { /* column 2 */
width:10em;
}
</style>
<table id="ministres" border="1">
<thead>
<tr><th>Nom</th><th>Ministère</th></tr>
</thead>
<tbody>
<tr><td>JM Ayrault</td><td>Premier</td></tr>
<tr><td>L Fabius</td><td>A. Etrangères</td></tr>
<tr><td>V Peillon</td><td>Education</td></tr>
<tr><td>C Taubira</td><td>Justice</td></tr>
<tr><td>P Moscovici</td><td>Economie</td></tr>
<tr><td>M Valls</td><td>Intérieur</td></tr>
</tbody>
</table>
