Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Adjusting HTML table width based on screen resolution

Posted on 2009-04-30
5
Medium Priority
?
1,832 Views
Last Modified: 2012-05-06
I want to be able to adjust table width in HTML page depending on screen resolution, using the following logic:

if screen width >= 1024 then
   set table.width to 1024
else
   set table width to 100%

please provide code
0
Comment
Question by:graga
  • 2
  • 2
5 Comments
 
LVL 5

Accepted Solution

by:
mms_master earned 200 total points
ID: 24267992
Hi,

I've attached an example web page below with a basic table that does what you have asked.
Instead of if screen width > 1024, I have used if browser window > 1024 because If the screen width is 1024 the browsers window will be slightly less. This would cause the table to be slightly too big and a scroll bar would be displayed at the bottom.

Note: This code requires the user to have javascript enabled.

Hope this helps,
mms_master
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
    #MyTable {
	    max-width: 1024px; /* Not supported by Internet Explorer */
		width:expression(document.body.clientWidth > 1024? "1024px": "100%" ); /* Work around for Internet Explorer */
	}
</style>
</head>
 
<body>
<table border='1' width='100%' id='MyTable'>
    <tr>
        <td>
            text
        </td>
    </tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 43

Expert Comment

by:David S.
ID: 24268023
To clarify what mms_master said...

max-width isn't supported by IE6, but is by IE7 and IE8.

Also JavaScript is only needed for that expression() to be used in IE.
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24268034
It'd be good if u set the table width in percentage so that it should increase or decrease with the resolution.
0
 
LVL 5

Expert Comment

by:mms_master
ID: 24268053
@Kravimir

Even though IE7 is supposed to support max-width when I removed the expression() line and tested in IE7 the table still went over 1024px. So did I do something wrong?

@qwerty
The table width is set to 100% unless the browsers clientWidth is > 1024px. So it will increase or decrease with the resolution but have a max width of 1024.
0
 
LVL 43

Expert Comment

by:David S.
ID: 24268126
It seems IE7 doesn't support max-width on tables when a width is given. It seems to work fine in IE8.

Thanks for pointing that out.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question