We help IT Professionals succeed at work.

How do you make a scrolling table fit to available screen height?

Del
Del asked
on
I have a scrolling table that I want to fit to available screen height.  I tried using 100% but it doesn't work.
Comment
Watch Question

using JS you can get screen.height, but unfortunately, that gives you total height, including the browsers chrome. You can however us a function to get the viewPort and then just set the table height using styles in a JS function on page load

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

<script type="text/javascript">
      
function init(){
document.getElementById('theTable').style.height = viewPort().height;
}
function viewPort() {
//from the comments portion of the above link
var h = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
var w = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;

return { width : w , height : h }
}


</script>


<body onLoad="init();">
<table id="theTable" border="1">
<tr><td>data1</td><td>data2</td></tr>
</table>
</body>
Del

Author

Commented:
I created a page with your suggestion but it produced a small table in the upper corner that didn't fit the screen.
Works for me in ie8 & 9 & FF 8.

did you copy & paste what I posted or did you modify it.? Remember that JS is case sensitive
if you did modify it post your code
Del

Author

Commented:
no I didn't modify it
What browser are you using?

this is what it should look like
ee1.jpg
Del

Author

Commented:
http://74.205.8.169/test3.cfm

This is a link to my test page.

Commented:
add width value 100%


<table style="" id="theTable" border="1" width="100%">
<tbody><tr><td>data1</td><td>data2</td></tr>
</tbody></table>
Del

Author

Commented:
That made the width right but the table is still only about a quarter inch tall.
Del

Author

Commented:
is the problem my brower?
Most Valuable Expert 2015

Commented:
(no points...)

> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Try getting rid of the doctype
ah thx agx -
yes if you've got a doctype in there but not fully formed html (which my code snippet was -not- ie: no <html> tags)  then it doesn't work


try this more correctly formed code

(btw  loose.dtd won't display this correctly)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript">
     
function init(){
document.getElementById('theTable').style.height = viewPort().height-15;
}
function viewPort() {
//from the comments portion of the above link
var h = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
var w = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;

return { width : w , height : h }
}


</script>

</head>


<body onLoad="init();">
<table id="theTable" border="1">
<tr><td>data1</td><td>data2</td></tr>
</table>
</body>

</html>

Del

Author

Commented:
It worked without the doctype.  
Del

Author

Commented:
Sidfishes, your version worked perfectly.

Commented:
you can use this code to make it work with all browsers



<html>
<head>
<script language="JavaScript">
function onpageload(){
      var scnWid,scnHei;
      if (self.innerHeight) // all except Explorer
      {
            scnWid = self.innerWidth;
            scnHei = self.innerHeight;
      }
      else if (document.documentElement && document.documentElement.clientHeight)
            // Explorer 6 Strict Mode
      {
            scnWid = document.documentElement.clientWidth;
            scnHei = document.documentElement.clientHeight;
      }
      else if (document.body) // other Explorers
      {
            scnWid = document.body.clientWidth;
            scnHei = document.body.clientHeight;
      }
      document.getElementById('table1').style.height = scnHei;
//document.write(scnHei);
}
</script>
</head>
<body onLoad="onpageload();" style="margin:0;">
<table id="table1" border="1" width="100%">
<tr><td>data1</td><td>data2</td></tr>
</table>
</body>

</html>
Del

Author

Commented:
I didn't mean to do this for no points.  I guess I didn't something wrong when setting up my question.