how to prevent unnecessary table resizing

Discussion in 'HTML' started by Dominik Jain, Aug 2, 2005.

  1. Dominik Jain

    Dominik Jain Guest

    Hi!

    Browsers resize a table to fit the content - that's generally a good idea.
    However, when the text in one cell is so long that it is wrapped, sometimes,
    the table does not need to be resized as much as it generally is.
    Consider the following example:

    <div style="width:100px; font-size:10px;
    font-family:Arial,Verdana,sans-serif">
    <table border="1" cellspacing="0" cellpadding="0">
    <tr><td>some<br>long text</td><td>bar</td></tr>
    </table>
    <br>
    <table border="1" cellspacing="0" cellpadding="0">
    <tr><td>some long text</td><td>bar</td></tr>
    </table>
    </div>

    In all the browsers I've tested, the first table was clearly less wide
    because the line break is a hard one rather than a soft one.
    I wonder, is there a way to modify this behaviour in order to make the
    second table appear in the same way as the first one?

    cheers!

    --
    Dominik Jain
    http://home.cs.tum.edu/~jain
    Dominik Jain, Aug 2, 2005
    #1
    1. Advertising

  2. Dominik Jain

    Neredbojias Guest

    With neither quill nor qualm, Dominik Jain quothed:

    > Hi!
    >
    > Browsers resize a table to fit the content - that's generally a good idea.
    > However, when the text in one cell is so long that it is wrapped, sometimes,
    > the table does not need to be resized as much as it generally is.
    > Consider the following example:
    >
    > <div style="width:100px; font-size:10px;
    > font-family:Arial,Verdana,sans-serif">
    > <table border="1" cellspacing="0" cellpadding="0">
    > <tr><td>some<br>long text</td><td>bar</td></tr>
    > </table>
    > <br>
    > <table border="1" cellspacing="0" cellpadding="0">
    > <tr><td>some long text</td><td>bar</td></tr>
    > </table>
    > </div>
    >
    > In all the browsers I've tested, the first table was clearly less wide
    > because the line break is a hard one rather than a soft one.
    > I wonder, is there a way to modify this behaviour in order to make the
    > second table appear in the same way as the first one?


    Use one table.

    > cheers!


    I hope you're not Australian.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Aug 3, 2005
    #2
    1. Advertising

  3. Dominik Jain

    dorayme Guest

    > From: "Dominik Jain" <>
    >
    > Hi!
    >
    > Browsers resize a table to fit the content - that's generally a good idea.
    > However, when the text in one cell is so long that it is wrapped, sometimes,
    > the table does not need to be resized as much as it generally is.
    > Consider the following example:
    >
    > <div style="width:100px; font-size:10px;
    > font-family:Arial,Verdana,sans-serif">
    > <table border="1" cellspacing="0" cellpadding="0">
    > <tr><td>some<br>long text</td><td>bar</td></tr>
    > </table>
    > <br>
    > <table border="1" cellspacing="0" cellpadding="0">
    > <tr><td>some long text</td><td>bar</td></tr>
    > </table>
    > </div>
    >
    > In all the browsers I've tested, the first table was clearly less wide
    > because the line break is a hard one rather than a soft one.
    > I wonder, is there a way to modify this behaviour in order to make the
    > second table appear in the same way as the first one?
    >
    >


    In the 2nd table, use <br> after the word "Some" and it will behave just
    like the first table.

    dorayme
    dorayme, Aug 3, 2005
    #3
  4. Dominik Jain

    Dominik Jain Guest

    dorayme <> wrote:

    >> <div style="width:100px; font-size:10px;
    >> font-family:Arial,Verdana,sans-serif">
    >> <table border="1" cellspacing="0" cellpadding="0">
    >> <tr><td>some<br>long text</td><td>bar</td></tr>
    >> </table>
    >> <br>
    >> <table border="1" cellspacing="0" cellpadding="0">
    >> <tr><td>some long text</td><td>bar</td></tr>
    >> </table>
    >> </div>
    >>
    >> In all the browsers I've tested, the first table was clearly less
    >> wide because the line break is a hard one rather than a soft one.
    >> I wonder, is there a way to modify this behaviour in order to make
    >> the second table appear in the same way as the first one?

    >
    > In the 2nd table, use <br> after the word "Some" and it will behave
    > just like the first table.


    While that is an obvious solution, I cannot do that, because the data in the
    table comes from a database, and I do not know where the browser is going to
    insert the soft line break.

    The question is: Can I do something to make a soft line break inserted by
    the browser have the same effect as a hard line break.

    bye,

    --
    Dominik Jain
    http://home.cs.tum.edu/~jain
    Dominik Jain, Aug 3, 2005
    #4
  5. Dominik Jain

    Dominik Jain Guest

    Neredbojias <> wrote:

    > Use one table.


    That will have the opposite effect - the first table will become wider... I
    want the tables to be as narrow as possible. So if a soft line break is
    inserted, the table could actually be narrower. The browsers' logic is: the
    longer the line, the wider the column should be.

    bye!

    --
    Dominik Jain
    http://home.cs.tum.edu/~jain
    Dominik Jain, Aug 3, 2005
    #5
  6. Dominik Jain

    Dominik Jain Guest

    Dominik Jain <> wrote:

    > <div style="width:100px; font-size:10px;
    > font-family:Arial,Verdana,sans-serif">
    > <table border="1" cellspacing="0" cellpadding="0">
    > <tr><td>some<br>long text</td><td>bar</td></tr>
    > </table>
    > <br>
    > <table border="1" cellspacing="0" cellpadding="0">
    > <tr><td>some long text</td><td>bar</td></tr>
    > </table>
    > </div>


    To clarify:
    Since the containing div has width 100, the first column will have a line
    break after the word "some" in both cases. The widths of the tables differ
    greatly, however, because in the second table the browsers use the length of
    the entire sentence as a basis for resizing the column. The soft line breaks
    they insert are not taken into consideration.

    Is there a way to get around that?

    On the real page, I have 3 columns and 1 row per table. All the coluimns may
    contain one or two lines after the insertion of soft line breaks. I would
    like to have the automatic sizing of column according that happens in
    tables, but I would like to avoid columns getting broader when soft line
    breaks would allow a shorter width, in order to minimize the spacing between
    columns.

    bye,

    --
    Dominik Jain
    http://home.cs.tum.edu/~jain
    Dominik Jain, Aug 3, 2005
    #6
  7. Dominik Jain

    Neredbojias Guest

    With neither quill nor qualm, Dominik Jain quothed:

    > Dominik Jain <> wrote:
    >
    > > <div style="width:100px; font-size:10px;
    > > font-family:Arial,Verdana,sans-serif">
    > > <table border="1" cellspacing="0" cellpadding="0">
    > > <tr><td>some<br>long text</td><td>bar</td></tr>
    > > </table>
    > > <br>
    > > <table border="1" cellspacing="0" cellpadding="0">
    > > <tr><td>some long text</td><td>bar</td></tr>
    > > </table>
    > > </div>

    >
    > To clarify:
    > Since the containing div has width 100, the first column will have a line
    > break after the word "some" in both cases.


    Why would it in the second case?

    > The widths of the tables differ
    > greatly, however, because in the second table the browsers use the length of
    > the entire sentence as a basis for resizing the column. The soft line breaks
    > they insert are not taken into consideration.


    What do you want it to do, break after the first soft line break? Is
    the cell width fixed?

    >
    > Is there a way to get around that?
    >
    > On the real page, I have 3 columns and 1 row per table. All the coluimns may
    > contain one or two lines after the insertion of soft line breaks. I would
    > like to have the automatic sizing of column according that happens in
    > tables, but I would like to avoid columns getting broader when soft line
    > breaks would allow a shorter width, in order to minimize the spacing between
    > columns.


    I think you're viewing this a trifle askew, matey.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Aug 3, 2005
    #7
  8. Dominik Jain

    Dominik Jain Guest

    Neredbojias <> wrote:

    >> Since the containing div has width 100, the first column will have a
    >> line break after the word "some" in both cases.

    >
    > Why would it in the second case?


    Because 100 pixels aren't enough to fit the words "some long text" in a
    single line using the given font size.

    I've put the code online, so you can see what I mean:
    http://cvsnix.lrt.mw.tu-muenchen.de/~jain/test.htm

    >> The widths of the tables differ
    >> greatly, however, because in the second table the browsers use the
    >> length of the entire sentence as a basis for resizing the column.
    >> The soft line breaks they insert are not taken into consideration.

    >
    > What do you want it to do, break after the first soft line break? Is
    > the cell width fixed?


    Of course not. I want cell width to be automatic.
    What I want to avoid is the unnecessary spacing that results from the
    insertion of soft line breaks. (see second table)

    bye,

    --
    Dominik Jain
    http://home.cs.tum.edu/~jain
    Dominik Jain, Aug 3, 2005
    #8
  9. Dominik Jain

    Neredbojias Guest

    With neither quill nor qualm, Dominik Jain quothed:

    > > What do you want it to do, break after the first soft line break? Is
    > > the cell width fixed?

    >
    > Of course not. I want cell width to be automatic.
    > What I want to avoid is the unnecessary spacing that results from the
    > insertion of soft line breaks. (see second table)


    Well, if I got this correctly now, the best way I can think of is to use
    a regular expression to convert the soft l-bs in the second-table text
    to spaces. This can be done with javascript or server-side scripting
    like PHP.

    A javascript example of converting all whitespace to spaces is:

    var stt="second table text";
    stt=stt.replace(/\W/," ");

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Aug 4, 2005
    #9
  10. Dominik Jain

    Dominik Jain Guest

    Neredbojias <> wrote:
    > Well, if I got this correctly now, the best way I can think of is to
    > use a regular expression to convert the soft l-bs in the second-table
    > text to spaces. This can be done with javascript or server-side
    > scripting like PHP.
    >
    > A javascript example of converting all whitespace to spaces is:
    >
    > var stt="second table text";
    > stt=stt.replace(/\W/," ");


    The whitespice in the example is already spaces only.
    Why would that help?

    If anything, I should be replacing certain spaces with <br>s...

    bye,

    --
    Dominik Jain
    http://home.cs.tum.edu/~jain
    Dominik Jain, Aug 4, 2005
    #10
    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. Srikanth Madani

    Prevent linker from unnecessary symbol resolution

    Srikanth Madani, May 10, 2004, in forum: C Programming
    Replies:
    1
    Views:
    291
    Mark McIntyre
    May 10, 2004
  2. Eric Wong

    Prevent Tkinter Canvas from resizing

    Eric Wong, Jan 20, 2006, in forum: Python
    Replies:
    1
    Views:
    1,221
    Fredrik Lundh
    Jan 20, 2006
  3. jd
    Replies:
    2
    Views:
    106
    jdigital
    Dec 16, 2005
  4. Pil (Trustworthy from Experience)

    Resizing a div by resizing its borders

    Pil (Trustworthy from Experience), Apr 18, 2009, in forum: Javascript
    Replies:
    9
    Views:
    336
    Proper
    Apr 21, 2009
  5. Proper
    Replies:
    0
    Views:
    189
    Proper
    Apr 18, 2009
Loading...

Share This Page