Rechercher : dans
Par :

Tableau HTML - Height = ""

Dernière réponse le 24 sep 2008 à 11:39:02 gaerebut, le 24 sep 2008 à 09:33:45 
 Signaler ce message aux modérateurs

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 Il y a 2 règles d'or pour réussir dans la vie :
-Règle 1:  ne jamais dire tout ce que l'on sait...
-Règle 2: ...

Configuration: Windows Vista
Firefox 3.0.1

Meilleures réponses pour « Tableau HTML Height = "" » dans :
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
Espace en HTML VoirEn HTML, les espaces consécutifs sont ignorés par les navigateurs, au même titre que les retours chariots ou les tabulations. Pour insérer plusieurs espaces consécutifs, il est nécessaire d'utiliser une entité HTML spécifique, appelée espace...
Introduction au HTML VoirPrésentation du HTML Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent...
Les formulaires HTML VoirIntérêt d'un formulaire Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internaute, à la manière des coupons-réponse présents dans certains...

1

papymucho, le 24 sep 2008 à 09:36:26

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

Répondre à papymucho

2

papymucho, le 24 sep 2008 à 09:39:51

http://www.commentcamarche.net/html/htmlframes.php3

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 ;-)

Répondre à papymucho

3

gaerebut, le 24 sep 2008 à 09:52:22

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
Il y a 2 règles d'or pour réussir dans la vie :
-Règle 1:  ne jamais dire tout ce que l'on sait...
-Règle 2: ...

Répondre à gaerebut

4

papymucho, le 24 sep 2008 à 09:55:04

Alors un div... sinon.. je passe la main :-D

Répondre à papymucho

5

gaerebut, le 24 sep 2008 à 10:18:02

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 Il y a 2 règles d'or pour réussir dans la vie :
-Règle 1:  ne jamais dire tout ce que l'on sait...
-Règle 2: ...

Répondre à gaerebut

6

papymucho, le 24 sep 2008 à 10:41:46

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.

Répondre à papymucho

7

gaerebut, le 24 sep 2008 à 10:52:33

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 Il y a 2 règles d'or pour réussir dans la vie :
-Règle 1:  ne jamais dire tout ce que l'on sait...
-Règle 2: ...

Répondre à gaerebut

8

PhP, le 24 sep 2008 à 11:23:01

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 ...

Répondre à PhP

9

gaerebut, le 24 sep 2008 à 11:25:52

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 Il y a 2 règles d'or pour réussir dans la vie :
-Règle 1:  ne jamais dire tout ce que l'on sait...
-Règle 2: ...

Répondre à gaerebut

10

 PhP, le 24 sep 2008 à 11:39:02

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 !
PhP  
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...

Répondre à PhP