CODEWITHSUNDEEP
htmlcssinternet-explorerstylesheet
Hand-E-Food
Hand-E-Food

Reputation: 12814

Make a table fill the entire window

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.

Upvotes: 21

Views: 140558

Answers (6)

Rab
Rab

Reputation: 35582

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.

Upvotes: 12

DanjahSoft Programmer
DanjahSoft Programmer

Reputation: 95

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

Upvotes: 0

Vishwas S L
Vishwas S L

Reputation: 179

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%";/>

Upvotes: 2

ColorCodin
ColorCodin

Reputation: 101

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.

Upvotes: 2

Janaka Bandara
Janaka Bandara

Reputation: 1072

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

Upvotes: 0

Todd Baur
Todd Baur

Reputation: 1005

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>

Upvotes: 26

Related Questions