web-dev-qa-db-fra.com

Faire un tableau remplir la fenêtre entière

Comment puis-je faire en sorte qu'un tableau HTML remplisse la fenêtre entière du navigateur horizontalement et verticalement?

La page est simplement un titre et une partition qui doivent remplir toute la fenêtre. (Je réalise que les tailles de police fixes constituent un problème distinct.)

<table style="width: 100%; height: 100%;">
    <tr style="height: 25%; font-size: 180px;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%; font-size: 540px;">
        <td>100.00%</td>
    </tr>
</table>

Lorsque j'utilise le code ci-dessus, la largeur de la table est correcte, mais la hauteur est réduite pour correspondre aux deux lignes de texte.

Je serai probablement obligé d'utiliser Internet Explorer 8 ou 9 pour présenter cette page.

htmlcssinternet-explorerstylesheet
15
Hand-E-Food

Vous pouvez utiliser cette position pour étendre un élément dans le conteneur parent.

<table style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
    <tr style="height: 25%; font-size: 180px;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%; font-size: 540px;">
        <td>100.00%</td>
    </tr>
</table>
17
Todd Baur

vous pouvez voir la solution sur http://jsfiddle.net/CBQCA/1/

OU 

<table style="height:100%;width:100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;border:1px solid">
     <tr style="height: 25%;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%;">
        <td>100.00%</td>
    </tr>
</table>​

J'ai supprimé la taille de la police pour montrer que les colonnes sont développées . J'ai ajouté border:1px solid uniquement pour m'assurer que le tableau est développé. vous pouvez l'enlever.

9
Raab

La ligne ci-dessous m'a aidé à résoudre le problème de la barre de défilement pour une table. le problème était difficile 2 barres de défilement dans une page. Le style ci-dessous appliqué à la table a bien fonctionné pour moi.
<table Style="position: absolute; height: 100%; width: 100%";/>

1
Vishwas S L

Essayez d'utiliser

<html style="height: 100%;">
    <body style="height: 100%;">
        <table style="height: 100%;">
        ...

afin de forcer tous les parents de l’élément table à s’étendre sur l’espace vertical disponible (ce qui éliminera la nécessité d’utiliser le positionnement absolute).

Fonctionne dans Firefox 28, IE 11 et Chromium 34 (et donc probablement aussi Google Chrome)

Source: http://www.dailycoding.com/posts/howtoset100tableheightinhtml.aspx

0
Janaka Bandara

En effet, bien entendu, il n’ya pas de hauteur de page réelle. N'oubliez pas que vous faites défiler le contenu d'une page verticalement, pas horizontalement, ce qui crée une largeur limitée mais une hauteur illimitée. Ce que la réponse choisie a été de faire en sorte que la table occupe la zone visible et y reste malgré tout (positionnement absolu). Donc théoriquement, ce que vous tentiez de faire était impossible ????????

0
DanjahSoft Programmer

Cela fonctionne bien pour moi:

<style type="text/css">
#table {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
}
</style>

Pour moi, le fait de modifier Hauteur et Largeur sur 100% ne le fait pas pour moi, et le réglage gauche, droit, haut et bas sur 0 ne le fait pas non plus, mais les utiliser ensemble fera l'affaire.

0
ColorCodin