SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jan 2008
    Location
    Palm Harbor, FL
    Posts
    348
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Question about setting widths of columns

    I have a 2x1 table that is 1000px wide. The left cell has a left text align, and the right cell has a right text align.

    How do I set the left column's width to only extend to the width of the content, and the right column's width to fill the rest of the table?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tables rendering with the automatic layout algorithm (which is the default) choose the column widths automatically based on the content. Using the fixed layout algorithm (the table-layout:fixed CSS property) allows you to override that, but then you have to set a specific width for the left column, i.e., it won't adapt to its content.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Morthian View Post
    How do I set the left column's width to only extend to the width of the content, and the right column's width to fill the rest of the table?
    Here's one way:
    Code:
    <style type="text/css">
        #WidthFoo {
            width: 1000px;
            border: 1px solid black;
            border-collapse: collapse;
        }
    
        #WidthFoo th, td {
            border: 1px solid black;
            padding: 0.5em;
            vertical-align: top;
            text-align: left;
        }
    
    
        .Column1 {
            width: 3%;
            white-space: nowrap;
        }
    
        .Column2 {
            text-align: right !important;
        }
    </style>
    
    <table id="WidthFoo">
        <tr>
            <th class="Column1">Column 1</th>
            <th class="Column2">Column 2</th>
        </tr>
        <tr>
            <td class="Column1">here are a few words</td>
            <td class="Column2">Blah, de blah, de blah</td>
        </tr>
    </table>

    Basically, set the first column to a nominal width and then stop its contents from wrapping.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you need to do is set it as percentages. That way that one column will fully extend the entire width of that column.

  5. #5
    SitePoint Evangelist JordashTalon's Avatar
    Join Date
    Dec 2008
    Posts
    505
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're probably going to have to set a specific width for the right table (i'm assuming it's a td tag) e.g.
    <td style="width: 200px;">

    And then for the left column you can try using the min-width property:

    <td style="min-width: 400px;">

    Which will allow it to stretch to full content capacity unless the case of the window being super small.

    hope that helps


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
  •