[beginner] stange COLSPAN behaviour

Discussion in 'HTML' started by JL, Dec 28, 2003.

  1. JL

    JL Guest

    I have a Table with 2 Rows.
    There are 3 Cells in the first Row and 1 Cell in the second Row (with:
    colSpan="3").

    Cannot be simpler, I don't even use CSS:
    ----------
    <TABLE border="1" width="800px">
    <TR>
    <TD width="150px">cell 1</TD>
    <TD width="150px">cell 2</TD>
    <TD>cell 3</TD>
    </TR>
    <TR>
    <TD colSpan="3">test test test test test test test test</TD>
    </TR>
    </TABLE>
    ----------

    I want the first two Cells to always keep their width="150px". The width of
    the third Cell can change to fit the total width of the Table .

    But:
    If the lenght of the text in the second Row reaches the end of the text of
    the first Row's third Cell ("cell 3") the width of the two first Cells
    change!!

    OK:
    _______________________
    | cell 1 | cell 2 | cell 3 |
    ------------------------------
    | test test |
    ------------------------------

    OK:
    _____________________
    | cell 1 | cell 2 | cell 3 |
    ------------------------------
    | test test test test |
    ------------------------------

    PROBLEM (the width of the first two Cells has changed)
    _______________________
    | cell 1 | cell 2 | cell 3 |
    -------------------------------
    | test test test test test test |
    -------------------------------

    This problem occured in IE and Opera. It's ok in Mozilla.
    I know I could use DIV for my layout but i'd like to understand this Table
    behaviour! Thanks!
     
    JL, Dec 28, 2003
    #1
    1. Advertising

  2. JL

    Ryan Stewart Guest

    "JL" <> wrote in message
    news:QVAHb.7459$...
    > I have a Table with 2 Rows.
    > There are 3 Cells in the first Row and 1 Cell in the second Row (with:
    > colSpan="3").
    >
    > Cannot be simpler, I don't even use CSS:
    > ----------
    > <TABLE border="1" width="800px">
    > <TR>
    > <TD width="150px">cell 1</TD>
    > <TD width="150px">cell 2</TD>
    > <TD>cell 3</TD>
    > </TR>
    > <TR>
    > <TD colSpan="3">test test test test test test test test</TD>
    > </TR>
    > </TABLE>
    > ----------
    >
    > I want the first two Cells to always keep their width="150px". The width

    of
    > the third Cell can change to fit the total width of the Table .
    >
    > But:
    > If the lenght of the text in the second Row reaches the end of the text of
    > the first Row's third Cell ("cell 3") the width of the two first Cells
    > change!!
    >
    > OK:
    > _______________________
    > | cell 1 | cell 2 | cell 3 |
    > ------------------------------
    > | test test |
    > ------------------------------
    >
    > OK:
    > _____________________
    > | cell 1 | cell 2 | cell 3 |
    > ------------------------------
    > | test test test test |
    > ------------------------------
    >
    > PROBLEM (the width of the first two Cells has changed)
    > _______________________
    > | cell 1 | cell 2 | cell 3 |
    > -------------------------------
    > | test test test test test test |
    > -------------------------------
    >
    > This problem occured in IE and Opera. It's ok in Mozilla.
    > I know I could use DIV for my layout but i'd like to understand this Table
    > behaviour! Thanks!
    >

    Well, I can't exactly explain it, besides to say HTML is quirky and often
    seems to just do what it wants. But if you put a style="table-layout:
    fixed;" in your table tag, you should get the behavior you're looking for.
     
    Ryan Stewart, Dec 28, 2003
    #2
    1. Advertising

  3. JL

    Sid Ismail Guest

    On Sun, 28 Dec 2003 08:32:34 -0500, "JL" <> wrote:

    : <TABLE border="1" width="800px">
    : <TR>
    : <TD width="150px">cell 1</TD>
    : <TD width="150px">cell 2</TD>
    : <TD>cell 3</TD>


    Try changing the third TD to <td with="500px">, else all TDs change
    proportionately.

    Sid
     
    Sid Ismail, Dec 28, 2003
    #3
  4. JL

    DU Guest

    JL wrote:

    > I have a Table with 2 Rows.
    > There are 3 Cells in the first Row and 1 Cell in the second Row (with:
    > colSpan="3").
    >
    > Cannot be simpler, I don't even use CSS:
    > ----------
    > <TABLE border="1" width="800px">
    > <TR>
    > <TD width="150px">cell 1</TD>
    > <TD width="150px">cell 2</TD>
    > <TD>cell 3</TD>
    > </TR>
    > <TR>
    > <TD colSpan="3">test test test test test test test test</TD>
    > </TR>
    > </TABLE>
    > ----------
    >
    > I want the first two Cells to always keep their width="150px". The width of
    > the third Cell can change to fit the total width of the Table .
    >
    > But:
    > If the lenght of the text


    Tables are not best to render text. Tables are best for handling,
    rendering tabular data; paragraphs are best for handling, rendering
    variable amount of text. If your webpage is using table to position
    text, then this is the first issue to address.

    in the second Row reaches the end of the text of
    > the first Row's third Cell ("cell 3") the width of the two first Cells
    > change!!
    >
    > OK:
    > _______________________
    > | cell 1 | cell 2 | cell 3 |
    > ------------------------------
    > | test test |
    > ------------------------------
    >
    > OK:
    > _____________________
    > | cell 1 | cell 2 | cell 3 |
    > ------------------------------
    > | test test test test |
    > ------------------------------
    >
    > PROBLEM (the width of the first two Cells has changed)
    > _______________________
    > | cell 1 | cell 2 | cell 3 |
    > -------------------------------
    > | test test test test test test |
    > -------------------------------
    >
    > This problem occured in IE and Opera. It's ok in Mozilla.


    If you use:
    <table border="1" width="800">
    <col width="150"><col width="150"><col>
    <tr>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
    </tr>
    <tr>
    <td colspan="3">test test test test</td>
    </tr>
    </table>
    you'll see that you can avoid this behavior in MSIE 6 for windows and
    Opera 7.50 (tested and verified in a compliant page).


    > I know I could use DIV for my layout but i'd like to understand this Table
    > behaviour! Thanks!
    >
    >


    The explanations about this behavior may be here:
    http://www.w3.org/TR/CSS2/tables.html#auto-table-layout

    DU
     
    DU, Dec 28, 2003
    #4
  5. JL

    JL Guest

    "Ryan Stewart" <> wrote in message
    news:...

    > Well, I can't exactly explain it, besides to say HTML is quirky and often
    > seems to just do what it wants. But if you put a style="table-layout:
    > fixed;" in your table tag, you should get the behavior you're looking for.
    >



    Oh!
    That works... Thanks!
     
    JL, Dec 28, 2003
    #5
  6. JL

    JL Guest

    "Sid Ismail" <> wrote in message
    news:...

    > Try changing the third TD to <td with="500px">, else all TDs change
    > proportionately.
    >
    > Sid
    >


    That works for my Table with a fixed width (width="800px") but if I use
    width="100%" it doesn't work to put a width to the third Cell!

    Thanks for the suggestion..
     
    JL, Dec 28, 2003
    #6
  7. JL

    Sid Ismail Guest

    On Sun, 28 Dec 2003 17:48:24 -0500, "JL" <> wrote:

    : That works for my Table with a fixed width (width="800px") but if I use
    : width="100%" it doesn't work to put a width to the third Cell!

    bad to mix px and %. :)

    Sid
     
    Sid Ismail, Dec 28, 2003
    #7
    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. Alexander M. Polak

    Stange effects?

    Alexander M. Polak, Aug 27, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    398
    Alexander M. Polak
    Aug 27, 2003
  2. Jack Fox

    stange anchor ref behavior

    Jack Fox, Nov 28, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    321
    Jack Fox
    Nov 29, 2004
  3. Henrry Pires

    Stange and complicated

    Henrry Pires, Feb 7, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    398
    Karl Seguin [MVP]
    Feb 7, 2006
  4. John
    Replies:
    3
    Views:
    404
    =?ISO-8859-1?Q?G=F6ran_Andersson?=
    Jun 15, 2006
  5. F. Senault
    Replies:
    0
    Views:
    151
    F. Senault
    Nov 18, 2010
Loading...

Share This Page