Adjusting HTML table width based on screen resolution

Posted on 2009-04-30
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
   set table width to 100%

please provide code
Question by:graga
    LVL 5

    Accepted Solution


    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,
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <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 */
    <table border='1' width='100%' id='MyTable'>

    Open in new window

    LVL 42

    Expert Comment

    by:David S.
    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.
    LVL 13

    Expert Comment

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

    Expert Comment


    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?

    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.
    LVL 42

    Expert Comment

    by:David S.
    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Java/J2EE and SOA

    This course will cover both core and advanced Java concepts like Database connectivity, Threads, Exception Handling, Collections, JSP, Servlets, XMLHandling, and more. You'll also learn various Java frameworks like Hibernate and Spring.

    Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

    779 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

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now