SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    TD are designed to fit the available space -- that means the outer 100% width will override anything set on the child TD until they all fit. Lose the 100% outer width and you might get the inner ones working... though a better approach would probably be to add table-layout:fixed to the outer table.

    Though 1000px? At that point I start to doubt you have tabular data or should even be using TABLE in the first place -- much less the accessibility train wreck such a large size would be; so I'm hoping that's just a test value.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by deathshadow60 View Post
    a better approach would probably be to add table-layout:fixed to the outer table.
    Yes! This is the answer to my question. Thank you!

    I'm hoping that's just a test value.
    Yes, that's right.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    To set column widths in a table you would attach the width to the <col> or <colgroup> tag by specifying a class on that tag and assigning a width to that class in the CSS.

    The widths of the individual <td> tags can't be set separately as all of the cells in a column must have the same width (subject to any applicable colspan attributes).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    To set column widths in a table you would attach the width to the <col> or <colgroup> tag by specifying a class on that tag and assigning a width to that class in the CSS.
    Thanks for the answer, but that doesn't seem to work:

    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;}
    #first {width:1000px;}
    #second {width:1000px;}
    #third {width:1000px;}
    </style>
    </head>
    <body>
    <div>
    <table>
    <colgroup>
    <col id="first">
    <col id="second">
    <col id="third">
    </colgroup>
    <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>
    The key to set it up correctly is using a fixed layout, either using <col> tags or setting a width to <td> tags.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You should note that when when you use width on <col>, it's basically only doing min-width. It will increase to fit.

    Take this example. The key is that the <div> needed a width of 3,000px for the cols to each have 1000px <td>'s (actually it's probbly 998px or something like that due to borders)
    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;}
    #first {width:1000px;}
    #second {width:1000px;}
    #third {width:1000px;}
    </style>
    </head>
    <body>
    <div style="width:3000px;">
    <table>
    <colgroup>
    <col id="first" style="width:1000px;background:red">
    <col id="second">
    <col id="third">
    </colgroup>
    <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>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You should note that when when you use width on <col>, it's basically only doing min-width. It will increase to fit.
    Which is what table-layout:fixed; prevents.


Bookmarks

Posting Permissions

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