How to set table height=100% via javascript?

**Crispy** · July 1, 2004

Ok, Im trying to make a table adjust dynamicly to 100% height and 100% width of a window via a javascript. I've narrowed it down to the below function, which should be compatible with most browsers. However, I know that with IE the document.documentElement.clientWidth can only be called after the <Head> tag has been rendered, hense the below will not work...

My question is; How do I calculate the height of the table row on page load and after that when the browser window is resized?

<script language="javascript"> 

function TableHeight() { 
  if( typeof( window.innerWidth ) == 'number' ) { 
    //Non-IE 
    myWidth = window.innerWidth; 
    myHeight = window.innerHeight; 
  } else if( document.documentElement && 
      ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { 
    //IE 6+ in 'standards compliant mode' 
    myWidth = document.documentElement.clientWidth; 
    myHeight = document.documentElement.clientHeight; 
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { 
    //IE 4 compatible 
    myWidth = document.body.clientWidth; 
    myHeight = document.body.clientHeight; 
  } 
  hiY = document.write(myHeight - 140); 

} 

</script>

It must be used in the following way:

<table width="100%"  border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td height="90" bgcolor="#CCCCCC">1</td> 
  </tr> 
  <tr> 
    <td height="25" bgcolor="#999999">2</td> 
  </tr> 
  <tr> 
    <script language="javascript">document.write( "<td height=\"" + hiY + "\">" );</script>3</td> 
  </tr> 
  <tr> 
    <td height="25" bgcolor="#333333">4</td> 
  </tr> 
</table>

**gandalfgrey** · July 1, 2004

If i understand you correctly, you want a table with 4 rows and the 3rd one must automatically resize? If so, this can be easily done in CSS!

<html>
<style>
table {border:1px solid black;width:100%;height:100%;}
thead td {height:90px;background:#CCCCCC}
tfoot td {background:#333333;height:25px;}
#2ndrow {height:25px;background:#999999;}
</style>
<table cellspacing="0" cellpadding="0">
 <thead><tr><td>SOME TEXT HERE(header) 1st row..</td></tr>
 <tr><td id="2ndrow">SOME TEXT HERE(header) 2nd row..</td></tr></thead>
 <tfoot><tr><td>SOME TEXT HERE(footer)</td></tr></thead>
 <tbody><tr><td>variable width cell</td></tr></tbody>
</table>
</html>

I used border on table, to show that it resizes with the window, it can be removed of course. I tested it on ie6 and firefox, works nice.

**Crispy** · July 1, 2004

Ok, not exactly what I had in mind, but it will do the trick I suppose ... thx

**neosapience** · July 2, 2004

Tables! AHHHHHHHHHHHHHH, anything but tables.

You can use <div> tags and CSS instead of tables, it's a lot nicer and easier.

**gandalfgrey** · July 2, 2004

so true, but he asked about the table :/

btw, you'd prefer 4 frames?

**Kenny Pollock** · July 6, 2004

Tables are for tabular data, and CSS is for layouts.

This is tabular data, which is why he is using tables.

**neosapience** · July 7, 2004

Tables are for tabular data, and CSS is for layouts.
This is tabular data, which is why he is using tables.

**DarkPhoenix** · July 7, 2004

Tables are for tabular data, and CSS is for layouts.
This is tabular data, which is why he is using tables.

He's right, you know.

**neosapience** · July 9, 2004

Data can be catagorized quite easily using CSS sheets. It's also more flexible and uses far less code. I can't see any real reason to use tables except maybe to be backwards compatible with some obsolete browser.

**DarkPhoenix** · July 12, 2004

I'll let someone else say it for me.

Here's why you should use tables and not CSS for tabular data. This is slide 43. For more reasons, read all slides until slide 51. (9 slides incl. the first one)

**newdles** · July 13, 2004

There is absolutely nothing "wrong" with tables. They function perfectly well and load perfectly fine. A moderately experienced coder in html alone could make a good design using tables. Yes, you have more power with using the <div> tags and css but it's not easier. I'll never understand where anyone gets the term "easier" to do than using tables.

We had a thread about all this over at pps.net already discussing why one is better of the other and why tables aren't bad. http://www.purephotoshop.net/showthread.php?t=2337

**DarkPhoenix** · July 13, 2004

As far as I can see, you were the only one who were pro-tables there. The only other hint of being pro-tables were the guy who were talking about the old 14.4 modem days, and that was basically cause there was no other way then.

By all means, use tables if you want to, but you'll have a much larger user base if you follow the directions of the Web Accessibility Initiative. (or Section 508)

Sign In

How to set table height=100% via javascript?

Recommended Posts

Crispy

gandalfgrey

Crispy

neosapience

gandalfgrey

Kenny Pollock

neosapience

DarkPhoenix

neosapience

DarkPhoenix

newdles

DarkPhoenix

Please sign in to comment

Recently Browsing 0 members

Activity

Browse