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.
This question is related to
html
css
internet-explorer
stylesheet
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>
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%";/>
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.
That is because, of course, there is no ACTUAL page height. Keep in mind that you scroll throughout the contents of a page vertically not horizontally, creating a limited width but unlimited height. What the selected answer did was to make the table take up the visible area and stay there no matter what(absolute positioning).So theoretically what you were trying to do was impossible
This works fine for me:
<style type="text/css">_x000D_
#table {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
bottom: 0;_x000D_
left: 0;_x000D_
right: 0;_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
}_x000D_
</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.
Try using
<html style="height: 100%;">
<body style="height: 100%;">
<table style="height: 100%;">
...
in order to force all parents of the table element to expand over the available vertical space (which will eliminate the need to use absolute positioning).
Works in Firefox 28, IE 11 and Chromium 34 (and hence probably Google Chrome as well)
Source: http://www.dailycoding.com/posts/howtoset100tableheightinhtml.aspx
Source: Stackoverflow.com