28220 sujets

CSS et mise en forme, CSS3

Prob pour faire un scroll sur un tableau

voici mon code :

<div style="overflow-y:scroll;height:25px;width:20px;">
    <table style="border:1px solid black;width:20px;">
      <tr>
       	<td>1</td>
      </tr>
      <tr>
       	<td>2</td>
      </tr>
      <tr>
       	<td>3</td>
      </tr>
      <tr>
       	<td>4</td>
      </tr>
      <tr>
       	<td>5</td>
      </tr>
      <tr>
       	<td>6</td>
      </tr>
    </table>
</div>



pourquoi ça marche sur IE et pas sur firefox ?

je ne respecte pas les standards ?? Smiley rolleyes


merci de m'aider please
Salut PoichOU,

Tu devrais mêtre tes styles dans une feuille de style (porte bien son nom la bestiole Smiley cligne ) pour ainsi séparer la mise en forme du contenu.

Donc tu donnes une class ou une id à la <div> qui contient le tableau. Et pour finir, dans ton css tu precises que cette <div> est scrolable.

Pour le html :

<div class="pourscroll"> 
       <table class="tableau">
...
       </table>
</div>


et dans ta css :

.pourscroll {
overflow: auto;
...
}
.tableau {
...
}
Bonsoir,

PoichOU a écrit :

pourquoi ça marche sur IE et pas sur firefox ?

je ne respecte pas les standards ?? Smiley rolleyes


overflow-y ne fait pas partie de CSS2. C'est une extension CSS Microsoft.

Cela dit, il me semblait qu'elle était supportée par Firefox 1.5 (pas Firefox1.0, ni Opera)
Modifié par Laurent Denis (01 Dec 2005 - 19:12)
merci à vous 2 de votre réponse

Hermes => bien sur que je sépare le style dans une feuille de style... là c'était juste pour l'exemple.

Laurent Denis => j'suis en version 1.0.7 de firefox et ça ne marche pas




n'y a t'il pas un moyen (n'importe lequel) de faire un tableau scrollable ?? Smiley eek


merci de m'aider Smiley sweatdrop


PoichOU
j'ai toujours un prob ... (je le sentais)


en fait je voudrais faire un tableau dans lequel il y a un scroll dès qu'il y a plus de 3 lignes et je voudrais qu'il soit compatible IE et FireFox ... Smiley ohwell

ça marche presque mais le problème est que le max-height ne marche pas sous IE et que si je n'en met pas c'est moche...

voici mon code HTML :
ex1
<table class="bordure" >
      <tr>
       	<td>titre</td>
      </tr>
 </table>
<div class="pourscroll">
    <table>
      <tr>
       	<td>1</td>
      </tr>
      <tr>
       	<td>2</td>
      </tr>
      <tr>
       	<td>3</td>
      </tr>
      <tr>
       	<td>4</td>
      </tr>
      <tr>
       	<td>5</td>
      </tr>
      <tr>
       	<td>6</td>
      </tr>
    </table>
</div>
<table class="bordure" >
      <tr>
       	<td>fin</td>
      </tr>
 </table>

<br />
<br />

ex2
<table class="bordure" >
      <tr>
       	<td>titre</td>
      </tr>
 </table>
<div class="pourscroll">
    <table>
      <tr>
       	<td>1</td>
      </tr>
      <tr>
       	<td>2</td>
      </tr>
     </table>
</div>
<table class="bordure" >
      <tr>
       	<td>fin</td>
      </tr>
 </table>


voici ma CSS :
 .pourscroll {
	overflow: auto;
	width:60px;
	max-height:75px;
}

.pourscroll table {
	background-color:blue;
	width:40px;
}

.bordure {
	border:1px solid black;
	width:40px;
	background-color:red;
}



quelqu'un pourrait m'aider ?

Merci

PoichOU
Modifié par PoichOU (02 Dec 2005 - 12:30)
j'ai une autre question Smiley ravi

je voudrais avoir la barre de scroll à l'intérieur de mon tableau.

Mon problème est que quand il n'y a pas de scroll mon tableau dépasse Smiley sweatdrop


cf l'exemple :
<html>



<head>
    <link rel="stylesheet" href="./test.css" type="text/css" media="screen" />
</head>

<body>
ex1
<table class="bordure" >
      <tr>
       	<td>titre</td>
      </tr>
 </table>
<div class="pourscroll">
    <table>
      <tr>
       	<td>11111111111111111111</td>
      </tr>
      <tr>
       	<td>22222222222222222222</td>
      </tr>
      <tr>
       	<td>33333333333333333333</td>
      </tr>
      <tr>
       	<td>44444444444444444444</td>
      </tr>
      <tr>
       	<td>55555555555555555555</td>
      </tr>
      <tr>
       	<td>66666666666666666666</td>
      </tr>
    </table>
</div>
<table class="bordure" >
      <tr>
       	<td>fin</td>
      </tr>
 </table>

<br />
<br />

ex2
<table class="bordure" >
      <tr>
       	<td>titre</td>
      </tr>
 </table>
<div class="pourscroll">
    <table>
      <tr>
       	<td>1</td>
      </tr>
      <tr>
       	<td>2</td>
      </tr>
     </table>
</div>
<table class="bordure" >
      <tr>
       	<td>fin</td>
      </tr>
 </table>			
		
</body>

</html>



.pourscroll {
	overflow: auto;
	width:200px;
	max-height:75px;
}

.pourscroll table {
	border:1px solid black;
	background-color:blue;
	width:181px;
}

.bordure {
	border:1px solid black;
	width:200px;
	background-color:red;
}



please help me.
Sujet clos
Aller à