By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,903 Members | 2,042 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,903 IT Pros & Developers. It's quick & easy.

Javascript: Modify table width dynamically

P: 3
I am writing a html page which has a table whose width needs to be resized dynamically based on the screen resolution. So, this I what I did:

<script language="Javascript">
if (screen.width<1024) {
document.getElementById('outerTable').width=700;
}
</script>
</head>
<body>
<table id="outerTable" width=900>
...
</table>

But its not working. Is it a bad syntax or am I missing something else?
Feb 3 '06 #1
Share this Question
Share on Google+
3 Replies


P: 2
try to put script part after defining table.
Nov 15 '06 #2

dswethar
P: 65
You are trying to call the element before defining it. That's why the error.

You can try any of the following codes:
<html>
<head>
<title>Just for Fun</title>
<script language="Javascript">
function checkScreen(){
if (screen.width<1024) {
document.getElementById("outerTable").width = 700;
}
}

</script>
</head>
<body onload="javascript:checkScreen()">
<table id="outerTable" width="1100" bgcolor="#cccccc">
<tr><td>
...
</td></tr>
</table>
</body>
</html>

In this, we are calling a function and changing the width later

OR

<html>
<head>
<title>Just for Fun</title>

</head>
<body>
<table id="outerTable" width="1100" bgcolor="#cccccc">
<tr><td>
...
</td></tr>
</table>
<script language="Javascript">
if (screen.width<1024) {
document.getElementById("outerTable").width = 700;
}

</script>
</body>
</html>

In this, the script is placed after the table is loaded.
Nov 15 '06 #3

Expert 100+
P: 392
You are trying to call the element before defining it.
That and I think it is supposed to be

document.getElementById('outerTable').style.width= 700;
Nov 15 '06 #4

Post your reply

Sign in to post your reply or Sign up for a free account.