6

I want to make my table take up 80% of the screen, but right now its only the size of the content in the table.

#ecom-mainarea .center
{
margin-left: 10%;
position: relative;
width: 80%;
height: 80%;   /* when this is 500px it works fine, but % doesn't work */ 
border: 1px solid;
border-bottom-color: teal;
border-top-color: gray;
border-left-color: gray;
border-right-color: teal;
background-color: white;
voice-family: "\"}\"";
voice-family: inherit;
vertical-align: text-top;
}
patrick
  • 16,091
  • 29
  • 100
  • 164

5 Answers5

8

You need to make sure that the htmland body elements have 100% height. They need to stretch from top to bottom. If not the html and body element will just be as high as your table.

Here you have a working sample:

<!doctype html>
<html>
<head>
    <title>Table height</title>
    <style>
        html, body
        {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
</head>
<body>
    <table style="background: cyan; height: 80%;">
        <tr>
            <td>
                Table has 80% of the height of the body
            </td>
        </tr>
    </table>
</body>
</html>
knut
  • 4,699
  • 4
  • 33
  • 43
1

Works fine so long as you specify a height of the parent element (in absolute units)

Stuart Burrows
  • 10,824
  • 2
  • 34
  • 33
1

You can use a bit of a hack. It uses positioning. See: http://jsfiddle.net/minitech/2vRrZ/

(Also, if you ever need vertical centering for multiple lines - that's how it's done. My invention as far as I know)

Ry-
  • 218,210
  • 55
  • 464
  • 476
  • You don't need an image. I've seen this before, not sure where though. http://jsfiddle.net/2vRrZ/4/ – thirtydot Jul 16 '11 at 17:40
  • @thirtydot: I wanted to avoid `inline-block`. Though I suppose it won't work on IE6 anyways. – Ry- Jul 16 '11 at 17:49
0

If I recall, percent is not supported for CSS heights. Gotta resort to other methods.

Brady Moritz
  • 8,624
  • 8
  • 66
  • 100
0

As a design suggestion unless you really want to have it as a percentage I'd suggest a fixed size for the table so the layout looks the same on every computer no matter what their resolution is.

rajh2504
  • 1,266
  • 2
  • 21
  • 37