www.webdeveloper.com
Results 1 to 2 of 2

Thread: Set a table columns width

  1. #1
    Join Date
    Nov 2009
    Posts
    80

    Set a table columns width

    Hi,

    I tried to do it by adjusting the <td> width:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Sample Page</title>
    <style type="text/css">
    div {width:100%; overflow:auto;}
    table, td {border:1px solid #000;}
    td {width:1000px;}
    </style>
    </head>
    <body>
    <div>
    <table>
    <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
    </tr>
    <tr>
    <td>Forth cell</td>
    <td>Fifth cell</td>
    <td>Sixth cell</td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    But it didn't work.

    Many thanks for any help!
    Mike

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there Rain Lover,

    if you check the table offsetWidth with javascript, you will see that it has a width of 3022px.

    Setting the div container width to 100&#37; is pointless as that is it's default width.

    It must be set to the table width.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Sample Page</title>
    <style type="text/css">
    div {width:3022px;}
    table, td {border:1px solid #000;}
    td {width:1000px;}
    </style>
    <script type="text/javascript">
    
    
    function init(){
       alert('overall table width='
       +document.getElementsByTagName('table')[0].offsetWidth+'px');
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    <div>
    <table>
    <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
    </tr>
    <tr>
    <td>Forth cell</td>
    <td>Fifth cell</td>
    <td>Sixth cell</td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    
    coothead
    Last edited by coothead; 03-09-2012 at 02:42 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles