Make a table fill the entire window
Solution 1
You can use position like this to stretch an element across the parent container.
<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>
Solution 2
you can see the solution on http://jsfiddle.net/CBQCA/1/
OR
<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>
I removed the font size, to show that columns are expanded.
I added border:1px solid
just to make sure table is expanded. you can remove it.
Solution 3
This works fine for me:
<style type="text/css">
#table {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
</style>
For me, just changing Height and Width to 100% doesn’t do it for me, and neither do setting left, right, top and bottom to 0, but using them both together will do the trick.
Solution 4
Below line helped me to fix the issue of scroll bar for a table; the issue was awkward 2 scroll bars in a page. Below style when applied to table worked fine for me.
<table Style="position: absolute; height: 100%; width: 100%";/>
Hand-E-Food
Updated on July 09, 2022Comments
-
Hand-E-Food almost 2 years
How can I make a HTML table fill the entire browser window horizontally and vertically?
The page is simply a title and a score which should fill the entire window. (I realise the fixed font sizes are a separate issue.)
<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>
When I use the above code, the table width is correct, but the height shrinks to fit the two rows of text.
I'm likely to be forced to use Internet Explorer 8 or 9 to present this page.
-
Hand-E-Food about 12 yearsThanks for those answers! I notice in IE8 that this seems to extend about another 10px too far. Is there an easy fix for this, or should I stick with
height: 95%
? -
Todd Baur about 12 yearsprobably margin:0 or padding:0 fixes that.
-
T30 almost 9 yearsThis doesen't prevent the table to extend vertically above the page.
-
Todd Baur over 8 yearsMind showing me some code so I can help? The table will fill the width and height of its parent. So if the parent container does it, so would the table.
-
Marcel Marino almost 8 yearsThe issue with this solution is that if you're trying to create a header you'll want the next element to go below this one, but absolute positions makes it intangible to the rest of the elements in the DOM.
-
Todd Baur about 7 yearsAbsolute positioning is relative to its parent container. That means '<div style="position:relative"> will contain/constrain an absolutely positioned element assuming no other rules are cascading into it.
-
kpie about 6 yearsyou are rendering white space in the html.