Quelle est la manière de paramétrer le navigateur pour définir une hauteur maximale sur une table?

Question

J'ai une table où je mets la hauteur du tbody

#ml_container table>tbody{ height: 500px; overflow: auto; overflow-x: hidden; } 

Le problème est que lorsque la table a 1 entrée, la 1 entrée est 500px élevé dans FF3. Je voudrais que l'entrée 1 soit toujours 20px (ou tout ce que je spécifie). Un autre problème est que Safari ne reconnaît même pas ce paramètre 500px donc la table n'a pas de hauteur maximale. Je veux juste une table déroulante qui affichera 500px de valeur élevée d'entrées à la fois. auriez vous des idées pour faire ça?

Answer 1

Vous ne pouvez pas définir une hauteur fixe ou maximale sur les éléments d'une table. The height property is only treated as a minimum height.

Vous pouvez ajouter à votre display: blocktbody. Comme ce n'est plus l'un des table-* display types dans ce cas, fera le prendre à la hauteur. Cependant, puisque le tbody n'est plus un table-row-group, vous vous retrouverez avec une table implicite à l'intérieur. Ainsi, toutes les colonnes des autres éléments thead, tbody ou tfoot ne seront plus alignées avec le tbody défilant.

En dehors de la non-concordance de colonnes, cependant, cela fait presque fonctionner dans tous les navigateurs les plus récents sauf IE. Vous devriez être capable de résoudre vous-même les problèmes restants.

Je n'ai aucune idée de comment le réparer dans IE, cependant. Je suis tombé sur "Pure CSS Scrollable Table with Fixed Header", mais c'est plutôt dépassé, puisque ses deux solutions fonctionnent dans IE6, mais se cassent horriblement dans IE7 et IE8 (de différentes manières aussi). Ils font fonctionnent dans le mode Quirks de IE, cependant, si vous en avez désespérément besoin, cela pourrait être votre seule option.

Answer 2

Thom a eu la bonne idée: utiliser javascript. Si la fenêtre est suffisamment grande pour que la table soit trop grande, définissez une hauteur manuelle fixe sur la table/l'élément. : D