Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to stretch an HTML table to 100% of the browser window height?

I'm using a table to design the layout of my web page. I want the table to fill the page even if it doesn't contain much content. Here's the CSS I'm using:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; 
}

#container {
    min-height: 100%;
    width: 100%; 
}

And I place something like this in the page code:

<table id="container">
<tr>
<td>
...

This works for Opera 9, but not for Firefox 2 or Internet Explorer 7. Is there a simple way to make this solution work for all popular browsers?

(Adding id="container" to td doesn't help.)

like image 859
Mikhail Avatar asked Sep 18 '08 04:09

Mikhail


People also ask

How do you stretch a table in HTML?

On the Guides page you don't have the width=100%, and on the index. html page (your front page) you don't have it specified either, but all the text (the latest news) on your page automatically stretches the table to its full width. You have to add a table width tag. That should fix it.

How do I fit an HTML table to fit the screen?

To make an HTML table tit the screen: Set the width to 100%, so that your code will look like this: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>My html table is set to fit the screen</td> </tr> ...

How do I make a full height table in HTML?

<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).

How do I stretch my browser window?

For example, pressing the Windows key and left arrow key resizes the window to fit the left half of the screen. Pressing the Windows key and the right arrow key resizes the window to fit the right half of the screen.


2 Answers

Try using this:

html, body    {
  height: 100%;
}

So besides making the table's height to 100%, you also should have to make sure that the html'd and body's height are also 100%, so it will stretch properly.

like image 161
deathlock Avatar answered Oct 23 '22 02:10

deathlock


Just use the height property instead of the min-height property when setting #container. Once the data gets too big, the table will automatically grow.

like image 41
Vincent McNabb Avatar answered Oct 23 '22 01:10

Vincent McNabb