Tableau HTML - Height = ""

[Fermé]
Signaler
Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
-
Messages postés
1767
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
-
Bonjour,

J'essaye depuis maintenant plusieurs heure (c'est un peu hyperbolisé mais c'est pour dire que j'y est passé du temps ^^) de définir une hauteur maximum a un tableau en HTML ou ce tableau est dynamique, en vain. Quand je dis dynamique, c'est qu'il affichera le contenu d'une base de données et donc cela créera une nouvelle à chaque fois !

Est-il possible de mettre une scrollbar a ce tableau a partir d'une taille limite ????

J'ai essayé <table style="max-height: 20%"> ou aussi l'attribue overflow: auto et hidden mais rien n'y fait ! :(

S'il vous plait c'est urgent ! Je dois présenter ce projets vendredi devant des patrons ! :s

LOL la haine !

A+

Gaerebut

10 réponses

Messages postés
140
Date d'inscription
mercredi 18 juin 2008
Statut
Membre
Dernière intervention
1 novembre 2009
220
Salut,

Dans ce cas, ce serait pas plutôt un min-height? ^^

Oups, edit : je dis des conneries lol..... je m'en vais relire ce message
Messages postés
140
Date d'inscription
mercredi 18 juin 2008
Statut
Membre
Dernière intervention
1 novembre 2009
220
https://www.commentcamarche.net/contents/494-frames-html

Une petite frame?

Edit à nouveau.... Une scroll-bar sur un tableau, à ma connaissance je ne pense pas, maintenant si c'est possible j'aimerais bien savoir comment aussi par curiosité :)

En revanche, tu peux peut-être contourner le problème, soit en passant par une frame dans laquelle tu mettrais ton tableau, soit par un div avec un height défini, caché au préalable par exemple, et si son remplissage nécessite une action de l'utilisateur, s'affichant à celle-ci, se remplissant, une scroll-bar serait créé automatiquement...

Voilà, ça ne résoud pas exactement le problème certes ;-)
Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
170
Non c'est démodé ça maintenant les frames ^^

En plus que je me trouve déjà dans une iframe donc ... ça va faire très petit ! Surtout (et oui il y a beaucoup de contrainte) que cette iframe n'est que le contenu d'un contenant ! Autrement dis, tu va sur http://www.havre-port.fr/ et tu vois que la partie du milieux n'est pas vraiment grosse, et ben c'est une appli qui s'y intègrera donc .... pas gros ^^

A+

Gaerebut
Messages postés
140
Date d'inscription
mercredi 18 juin 2008
Statut
Membre
Dernière intervention
1 novembre 2009
220
Alors un div... sinon.. je passe la main :-D
Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
170
lol

Désolé j'ai déjà tout essayé ! Même avec un div !! :(

je met quoi dans le div ? Pareil ?

Si c'est ça, ça marche pas :'(

lol

A+

Gaerebut
Messages postés
140
Date d'inscription
mercredi 18 juin 2008
Statut
Membre
Dernière intervention
1 novembre 2009
220
Tu mets ton tableau...

Dans ton css, du défini un heigth:100px sur ton div par exemple..... Quand ton tableau se remplira, la scrollbar va apparaitre dans ton div....

C'est étonnant que ça ne marche pas... j'ai fait un datepicker récemment, avec l'apparation d'un div lors d'un click sur une image.... avant de pouvoir définir une bonne hauteur j'ai fait quelques tests, quand la hauteur était insuffisante par rapport au nombre de lignes du tableau, une scrollbar apparaissait.... me permettant de parcourir mon tableau...


Une bonne journée, bye.
Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
170
Ok, ça marche toujours pas ... lol

Il y a une scrollbar pour la iframe entière et non juste pour la div ! Bizarre comme tu dis, moi aussi j'ai eu le reflexe de height, min-height, max-height, tableau et div mais ça marche pas dans ce cas là ! Bizzare bizzare !

J'ai aussi déjà utilisé des div a scrollbar ou des tableau mais là ... je sèche ! ^_^'

mais j'ai réussi a me débrouiller autrement tanpis ...
Puis tout façon, c'est pour un menu d'administration donc .... ça gènera que les admins XD

A+

Gaerebut
Messages postés
1767
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
607
Bjr

Avec un div tout bête je ferais comme ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
.container
{
	position : absolute;
	left : 100px;
	top : 150px;
	width : 300px;
	height : 100px;
	overflow : auto;
	border-style : solid;
	border-width : 1px;
	border-color : #ff0000;
}

td
{
	white-space: nowrap;
	border-style : solid;
	border-width : 1px;
	border-color : #1010a0;
}

table
{
	border-collapse : collapse;
}
</style>
</head>
<body>
Test tableau
<div class="container">
	<table border="0" cellspacing="0" cellpadding="3">
		<tr>
			<td>Demo ligne 1-1</td>
			<td>Demo ligne 1-2</td>
			<td>Demo ligne 1-3</td>
		</tr>
	
		<tr>
			<td>Demo ligne 2-1</td>
			<td>Demo ligne 2-2</td>
			<td>Demo ligne 2-3</td>
		</tr>
		
		<tr>
			<td>Demo ligne 3-1</td>
			<td>Demo ligne 3-2</td>
			<td>Demo ligne 3-3</td>
		</tr>
		
		<tr>
			<td>Demo ligne 4-1</td>
			<td>Demo ligne 4-2</td>
			<td>Demo ligne 4-3</td>
		</tr>
	
		<tr>
			<td>Demo ligne 5-1</td>
			<td>Demo ligne 5-2</td>
			<td>Demo ligne 5-3</td>
		</tr>
		
		<tr>
			<td>Demo ligne 6-1</td>
			<td>Demo ligne 6-2</td>
			<td>Demo ligne 6-3</td>
		</tr>		
		
	</table>
</div>
</body>


PhP  
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...
Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
170
Merci beaucoup à toi mais moi aussi j'ai fait pareil ...

Mais ça doit venir du fait que je suis dans un iframe et que j'utilise la librairie Window.js (qui utilise des iframe)

Mais oui je suis d'accord que ça marche comme ça normalement !

Mais pas là :(

J'ai fait autrement ^^

A+ et merci encore à vous

Gaerebut
Messages postés
1767
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
607
Ben avec une iframe même combat : ok sour IE7 et FF


tableau_iframe.htm :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
.container
{
	position : absolute;
	left : 100px;
	top : 150px;
	width : 300px;
	height : 100px;
	overflow : auto;
	border-style : solid;
	border-width : 1px;
	border-color : #ff0000;

}
</style>
</head>
<body>
Test tableau
<iframe class="container" src="tableau.htm" ></iframe>
</body>



tableau.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
body
{
	margin : 0px;
	padding : 0px;
}	


td
{
	white-space: nowrap;
	border-style : solid;
	border-width : 1px;
	border-color : #1010a0;
}

table
{
	border-collapse : collapse;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="3">
		<tr>
			<td>Demo ligne 1-1</td>
			<td>Demo ligne 1-2</td>
			<td>Demo ligne 1-3</td>
		</tr>
	
		<tr>
			<td>Demo ligne 2-1</td>
			<td>Demo ligne 2-2</td>
			<td>Demo ligne 2-3</td>
		</tr>
		
		<tr>
			<td>Demo ligne 3-1</td>
			<td>Demo ligne 3-2</td>
			<td>Demo ligne 3-3</td>
		</tr>
		
		<tr>
			<td>Demo ligne 4-1</td>
			<td>Demo ligne 4-2</td>
			<td>Demo ligne 4-3</td>
		</tr>
	
		<tr>
			<td>Demo ligne 5-1</td>
			<td>Demo ligne 5-2</td>
			<td>Demo ligne 5-3</td>
		</tr>
		
		<tr>
			<td>Demo ligne 6-1</td>
			<td>Demo ligne 6-2</td>
			<td>Demo ligne 6-3</td>
		</tr>		
		
	</table>
</body>



A mon avis ta librairie window.js = grosse daube !