Menu
I've got some JavaScript I'm trying to use to define my table width/height to make it fluid across different resolutions. It seems to work fine for the width but I can't get it to work for the height. It is setting the correct number into the correct variable, it's just not setting the tables height. Here's what I got..
<html>
<head>
<script type="text/javascript">
var viewportwidth;
var viewportheight;
var tablewidth;
var tableheight;
if (typeof window.innerWidth != 'undefined'){ //set's viewport width/height into respective variables
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0){
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}else{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
function asdf(){
tablewidth = Math.round(viewportwidth/100*70); //sets table width to 70% of viewport width
tableheight = Math.round(tablewidth/100*74); //sets table height to 74% of table width, this number is ambigous
document.getElementById('poop').innerHTML = tableheight+', '+tablewidth+', viewport width is '+viewportwidth+'x'+viewportheight;
document.getElementById('container').width = tablewidth;
document.getElementById('container').height = tableheight;
}
</script>
</head>
<body onload="asdf();">
<span id="poop"></span>
<table id="container" cellpadding="0" border="1" cellspacing="0" width="" height="">
<tr><td colspan="5"></td></tr>
<tr>
<td width="38%"></td>
<td width="12%"></td>
<td width="21%"></td>
<td width="14%"></td>
<td width="15%"></td>
</tr>
</table>
</body>
</html>
Anyone see what I'm doing wrong?
669
Again, using a tape measure and double checking is always suggested. -A table's DIAMETER, which is only used for measuring round tables, can be found by measuring across the top of the table (end to end) -- from the widest part of the table. The round table pictured above has a diameter of 72 inches.
To set the table width in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property width.
To manipulate the height or width of an entire table, place the size attribute (either "WIDTH=" or "HEIGHT=") within the <TABLE> code. To manipulate individual cells, place the size attribute within the code for that cell.
var trTagHeight = tableHeight/totalRowInTable; console. log(trTagHeight); //Note: This is approx value of each row, excluding padding and cell padding value. This is probably the closest answer so far. The only thing is that it won't guarantee any particular row... just the average height of all of them.
Try this may this work
var width = document.getElementById('container').style.offsetWidth;
var height = document.getElementById('container').style.offsetheight;
answered Oct 14 '22 11:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With