fixed-width column and variable-width columns mixed

Discussion in 'HTML' started by ssk, Oct 30, 2006.

  1. ssk

    ssk Guest

    Hi,

    I want to have a table with 3 columns.
    The table's width is 100%.
    1st column's width should be 100 px.
    The other 2 columns are variable-width but they should be the same.

    One option is that:
    Table: 100%
    1st column: 100 px
    2nd column: 50%
    3rd column: 50%

    That might work but I don't think it's way to go.

    What's the best way to do that?

    Thanks.

    Sam
     
    ssk, Oct 30, 2006
    #1
    1. Advertising

  2. ssk

    dorayme Guest

    In article
    <>,
    "ssk" <> wrote:

    > Hi,
    >
    > I want to have a table with 3 columns.
    > The table's width is 100%.
    > 1st column's width should be 100 px.
    > The other 2 columns are variable-width but they should be the same.
    >
    > One option is that:
    > Table: 100%
    > 1st column: 100 px
    > 2nd column: 50%
    > 3rd column: 50%
    >
    > That might work but I don't think it's way to go.
    >


    If you want the table to be as wide as the container and you want
    the left 100px and the rest divided evenly, why is it not the way
    to go? We are talking all loose here, not getting down to the
    html really but still...

    --
    dorayme
     
    dorayme, Oct 30, 2006
    #2
    1. Advertising

  3. ssk

    dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > In article
    > <>,
    > "ssk" <> wrote:
    >
    > > Hi,
    > >
    > > I want to have a table with 3 columns.
    > > The table's width is 100%.
    > > 1st column's width should be 100 px.
    > > The other 2 columns are variable-width but they should be the same.
    > >
    > > One option is that:
    > > Table: 100%
    > > 1st column: 100 px
    > > 2nd column: 50%
    > > 3rd column: 50%
    > >
    > > That might work but I don't think it's way to go.
    > >

    >
    > If you want the table to be as wide as the container and you want
    > the left 100px and the rest divided evenly, why is it not the way
    > to go? We are talking all loose here, not getting down to the
    > html really but still...


    If 100px is taken away then the rest is not 50% and 50%
    of-the-whole-table. Sorry! OK, there are various ways to go but I
    just want to say this before anyone notices further!

    --
    dorayme
     
    dorayme, Oct 30, 2006
    #3
  4. ssk

    dorayme Guest

    In article
    <>,
    "ssk" <> wrote:

    > Hi,
    >
    > I want to have a table with 3 columns.
    > The table's width is 100%.
    > 1st column's width should be 100 px.
    > The other 2 columns are variable-width but they should be the same.
    >
    > One option is that:
    > Table: 100%
    > 1st column: 100 px
    > 2nd column: 50%
    > 3rd column: 50%
    >
    > That might work but I don't think it's way to go.
    >
    > What's the best way to do that?
    >


    This is one way to go:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <table style="width:100%;margin:0;padding:0;"><tr>

    <td style="width:100px;">jashdfjkdsh</td>

    <td>
    <table style="width:100%;margin:0;padding:0;"><tr>
    <td style="width:50%;">jashdfjkdsh</td>
    <td style="width:50%;">hgjjhghjg mmmm nnn jkgkjh</td>
    </tr></table>
    </td>

    </tr></table>
    </body>
    </html>

    No doubt there is better still.

    --
    dorayme
     
    dorayme, Oct 30, 2006
    #4
  5. ssk

    Ben C Guest

    On 2006-10-30, ssk <> wrote:
    > Hi,
    >
    > I want to have a table with 3 columns.
    > The table's width is 100%.
    > 1st column's width should be 100 px.
    > The other 2 columns are variable-width but they should be the same.
    >
    > One option is that:
    > Table: 100%
    > 1st column: 100 px
    > 2nd column: 50%
    > 3rd column: 50%
    >
    > That might work but I don't think it's way to go.


    It probably does work. But you've asked for an inconsistent set of
    things and letting the UA decide according to its arbitrary rules which
    you care about the least. As you say, not a good way to do.


    > What's the best way to do that?


    Just set 100px on the first column and leave the other two to auto.

    If the table itself has a width (100%) the UA will divide the extra
    space evenly between the auto width columns.

    Not sure where/if this is specified (that's the problem with tables),
    but try it in all your browsers.
     
    Ben C, Oct 30, 2006
    #5
  6. Scripsit ssk:

    > I want to have a table with 3 columns.


    Consider a different approach. The odds are that you are using a table for
    layout only and should take a more approach instead.

    > The table's width is 100%.


    Sounds like a layout table. For a real table, for presenting tabular data,
    there's seldom any reason to ask for 100% width no matter what the canvas
    is.

    > 1st column's width should be 100 px.


    Sounds like a layout table with navigation bar squeezed into 100 px. Don't
    use px widths. You cannot know what the most suitable (to a user) font size
    is, so you cannot possibly know how many pixels you need for a word.

    > The other 2 columns are variable-width but they should be the same.


    You _could_ use

    <table border width="100%" style="table-layout: fixed">
    <tr><th width="100">foo</th><th>bar</th><th>barbar</th></tr>

    etc.

    You don't set widths for other rows, since the widths are calculated from
    the widths of the first row cells anyway, due to table-layout: fixed. A
    browser would divide the remaining width evenly between the 2nd and the 3rd
    column.

    As usual, usual caveats apply, but this works even on rather old browsers
    like IE 6. (Whether it works depends mainly on browser support to the CSS
    property table-layout.)

    The usual caveats include the principle that CSS often works when you
    wouldn't actually want it to work if you knew all the facts. Using
    table-layout: fixed and setting the width of a column to 100 pixels (in CSS
    or in HTML), you _really_ get (on conforming browsers) a 100 pixels wide
    column, even if this means brutally cutting (procrusteanating) the content
    of a cell. Try this with
    <th width="100">Supercalifragilisticexpialidocious</th>

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Oct 30, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Craig G

    datagrid fixed width columns

    Craig G, Nov 15, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    619
    Shiva
    Nov 15, 2004
  2. johnp
    Replies:
    4
    Views:
    3,672
    Toby Inkster
    May 23, 2005
  3. Tomasz
    Replies:
    7
    Views:
    522
    Tomasz
    Apr 12, 2007
  4. Carl Howarth

    DG Column Width vs Table Column Width

    Carl Howarth, Oct 22, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    267
    Eliyahu Goldin
    Oct 24, 2004
  5. Greg Smith

    GridView - set a fixed column width

    Greg Smith, Apr 3, 2007, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    187
    Greg Smith
    Apr 3, 2007
Loading...

Share This Page