HTML problems - table vs CSS?

February 16, 2005 11:29 AM

For my job, I'm usually on the Photoshop-end of web design, but right now I'm working on the 'buildout' phase of a project in HTML that has run into a problem: getting a certain table to display at 100% height. [+]

You'll notice the white table on this page doesn't extend all the way down. Is there a clever CSS parameter I could deploy in order to fix this? Or any other workaround? You'd think it'd be as simple as "table-height: 100%" or something, but alas...

posted by dhoyt to Computers & Internet (4 answers total)

Assigning an explicit "height=100%" in the table tag itself usually works for me.

(It looks like you're assigning the table width explicitly there. Perhaps this is overriding the CSS size parameters?)
posted by neckro23 at 11:53 AM on February 16, 2005

It's because the browser is rendering in standards-compliant mode (see this excellent description for more details). Taking out the DOCTYPE works, but that isn't recommended. Set the HTML and BODY and TABLE height to 100%, and it should work.
posted by brool at 12:00 PM on February 16, 2005

This is one of the big problems with CSS. There are a couple of hacks, but none are (if you'll pardon the pun) 100% effective.

What you have to do is first use JavaScript to measure the height of the largest column, then enter that value into the CSS.

Here's the jscript function that will turn a DIV (called 'thedivinquestion') into 100% height.

function setheight() {
var perc = document.getElementById('thedivinquestion');
perc.style.height = 'auto';
var x = perc.offsetHeight;
perc.style.height = x + "px";
}

This doesn't work cross-browser, unfortunately. Read this for more information.

This seems to solve the problem nicely, if you don't mind the implementation.

Naturally, you could just use tables. :)
posted by Civil_Disobedient at 12:02 PM on February 16, 2005

This can get complicated. height="100%", while also not being kosher 100% CSS markup, doesn't really work when the browser is in Standards Compliance rendering mode like it is with your page. Look at this discussion on 100% height and how it's handled across browsers and rendering modes.
posted by zsazsa at 12:07 PM on February 16, 2005