Forcer un scrollbar horizontal dans un div
Résolu
bou
-
Papou81640 Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
Papou81640 Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Html scrollbar horizontal
- Editeur html - Télécharger - HTML
- Ecran horizontal - Guide
- Espace html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- Html download - Télécharger - HTML
12 réponses
Bon eh bien je m'auto réponds pour les gens qui auraient le même problème que moi, j'ai réussi à faire ce que je voulais en ajoutant à mon css la propriété "white-space:nowrap;".
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
J'espere que qqn pourra m'aider :
Bonjour à Tous,
J'ai un petit probleme pour afficher un scrolbar dans une cellule.
Je pense que le probleme vient de la premiere ligne ou il y a des colspan. Voici le code :
<TABLE cellspacing="0" BORDER="1">
<TR>
<TH> Jours -><br>Horaires </TH>
<TH colspan="4"> Lundi </TH>
<TH colspan="4"> Mardi </TH>
<TH colspan="4"> Mercredi </TH>
</TR>
<TR>
<TH>8h-10h</TH>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
</TR>
<TR>
<TH>10h-12h</TH>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
</TR>
</table>
ET EN CSS :
table {
border-collapse: separate;
border: 1px solid #9DABCE;
border-width: 5px ;
font-size: 12px;
}
td {
width: 10px;
height: 10px;
overflow: scroll;
border: 0.1em solid #9DABCE;
}
Je voudrai que la taille des cellules avec les noms et prenom soit fixe et que si les noms sont trop grand, il apparaisse un scrollbar.
Merci d'avance pour votre aide.
Bonjour à Tous,
J'ai un petit probleme pour afficher un scrolbar dans une cellule.
Je pense que le probleme vient de la premiere ligne ou il y a des colspan. Voici le code :
<TABLE cellspacing="0" BORDER="1">
<TR>
<TH> Jours -><br>Horaires </TH>
<TH colspan="4"> Lundi </TH>
<TH colspan="4"> Mardi </TH>
<TH colspan="4"> Mercredi </TH>
</TR>
<TR>
<TH>8h-10h</TH>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
</TR>
<TR>
<TH>10h-12h</TH>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
</TR>
</table>
ET EN CSS :
table {
border-collapse: separate;
border: 1px solid #9DABCE;
border-width: 5px ;
font-size: 12px;
}
td {
width: 10px;
height: 10px;
overflow: scroll;
border: 0.1em solid #9DABCE;
}
Je voudrai que la taille des cellules avec les noms et prenom soit fixe et que si les noms sont trop grand, il apparaisse un scrollbar.
Merci d'avance pour votre aide.
PErso, pour les libellé des colonne trop grand, je préféré les tooltips. attribut title de la balise th ou voir tooltips javascript pour le design.
est ce que tu peux me montrer ton exemple, j'ai le même probleme et j'arrive pas a forcer le scroll horizontal.
merci
<?php
//fonction qui retourne l'extension d'un fichier
function recupextension ($filename)
{
return substr(strrchr($filename, '.'), 1);
}
//fonction qui permet de compter le nombre d'images dans un dossier spécifié à l'appel de la fonction
function listeRep($rep)
{
if (is_dir($rep))
{
if ($rh = opendir($rep))
{
$i = 0;
while (($file = readdir($rh)) !== false)
{
if ($file != '.' && $file != '..')
{
if (!is_dir($rep.$file) && (recupextension($file)=="jpg" || recupextension($file)=="gif" || recupextension($file)=="png" || recupextension($file)=="jpeg" || recupextension($file)=="JPG" || recupextension($file)=="GIF" || recupextension($file)=="PNG" || recupextension($file)=="JPEG"))
{
//mise au bon format de l'affichage des vignettes (100 de haut)
$dim = getimagesize($_GET['fichier_photos'].'/'.$file);
if ($dim[1] > 100)
{ $coef = $dim[1]/100;
$hauteur = 100;
$largeur = $dim[0]/$coef;
}
else
{ $hauteur = $dim[0];
$largeur = $dim[1];
}
echo '<a href="affichage_photos.php?fichier_photos='.$_GET['fichier_photos'].'&id='.$file.'"><img src="'.$_GET['fichier_photos'].'/'.$file.'" width='.$largeur.'px height='.$hauteur.'px/> </a>';
}
}
}
}
}
}
?>
<?php
// affichage du bandeau fixe ou des vignettes correspondant à la bonne catégorie
if ($_GET['fichier_photos']==0)
{
echo '<div class="div-mh-sans-scroll" style="width:900px; height:125px margin=auto;"><img src="images/bandeau_photos.jpg">';
}
else
{
//affichage de mes photos, ici qu'il y avait un problème de scroll
echo '<div class="div-mh" style="width:900px;">';
listeRep($_GET['fichier_photos']);
}
?>
</div>
j'ai rajouté dans le css de ce div :
.div-mh {
width: 900px;
height: 125px;
overflow: auto;
white-space:nowrap;
overflow-y: hidden;
}
le white space, et il a résolu tout mon problème : il n'y a plus de retour à la ligne automatique ^^