force width of a column in a table 6

nix45 · Jan 12, 2004

I have a CGI/Perl script that generates a table with columns like this...

<form method="POST" <action="/cgi-bin/stuff.pl">
<table border="1" width="100%">
<tr>
<td><b>Select</b></td>
<td><b>Number</b></td>
<td><b>From</b></td>
<td><b>To</b></td>
<td><b>Subject</b></td>
<td><b>Reason</b></td>
<td><b>Date/Time</b></td>
</tr>

Sometimes the "From" field will have a long email address inside that will cause that one column to spam the width of the page. How can I force each column to be a certain width regardless of whats inside each box? I've tried specifically setting the width like below, but it doesn't work if there is a single email address (or word) that is longer than the width of the column.

<td width="50"><b>From</b></td>

Thanks,
Chris

WartookMan · Jan 12, 2004

Unfortunately, if the string you are placing in your table cell is continuous with no spaces in it (such as an email address - eg [ignore]someone@someone.somthing[/ignore]), the cell will exand to accommodate the contents.

If you have text WITH spaces in it and it is wrapping when you don't want it to, obviously you can use the NOWRAP option on the TD tag. However, there is not much you can do to force wrapping to occur... I believe.

Would it be possible to create each field on a new line, and lay them out vertically rather than horizontally... or are you outputting many results?

For example:

Code:

<form method=&quot;POST&quot; action=&quot;/cgi-bin/stuff.pl&quot;>
  <table border=&quot;1&quot; width=&quot;100%&quot;>
  <tr>
    <td><b>Select:</b> ... <BR>
        <b>Number:</b> ... <BR>
        <b>From:</b> ... <BR>
        <b>To:</b> ... <BR>
        <b>Subject:</b> ... <BR>
        <b>Reason:</b> ... <BR>
        <b>Date/Time</b> ...</td>
  </tr>
  </table></form>

or even:

Code:

<form method=&quot;POST&quot; action=&quot;/cgi-bin/stuff.pl&quot;>
  <table border=&quot;1&quot; width=&quot;100%&quot;>
  <tr><td><b>Select:</b></td><td> ... </td></tr>
  <tr><td><b>Number:</b></td><td> ... </td></tr>
  <tr><td><b>From:</b></td><td> ... </td></tr>
  <tr><td><b>To:</b></td><td> ... </td></tr>
  <tr><td><b>Subject:</b></td><td> ... </td></tr>
  <tr><td><b>Reason:</b></td><td> ... </td></tr>
  <tr><td><b>Date/Time:</b></td><td> ... </td></tr>
  </table></form>

Pete.

Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

Wullie · Jan 12, 2004

Hi guys,

There is an IE workaround, but not sure of any cross browser way.

http://msdn.microsoft.com/library/d...uthor/dhtml/reference/properties/wordwrap.asp

One way that works in certain circumstances is to replace certain chars in the string with their HTML equivelant, and most browsers will wrap the string at those characters.

Hope this helps

Wullie

http://www.freshlookhosting.com

http://www.tutorial-world.com

http://www.freshlookdesign.co.uk

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell

Vragabond · Jan 12, 2004

You can set it do overflow: auto; Any content that is larger than the specified width will get scrollbars in order to accomodate it within the cell. This does not work directly on the td, you will need to add another div like this:

<td style="width: 50px;"><div style="overflow: auto;"><b>Very long from</b></div></td>

nix45 · Jan 13, 2004

Wartookman, I need to lay them out horizontally as there could be anywhere from 1 to 5000 rows.

Wullie, that looks like it could work, but we use others browsers besides IE (IE, Opera, Mozilla, Safari). I looked at the code in the example, but I'm not sure exactly how to write that in the table. Can you please give me an example?

Vragabond, that sounds like it could work, but I'm not sure how to incorporate that into the table. I tried something like this, but it doesn't do anything...

<table border="1" width="80px">
<tr>
<td style="width: 20px;"><div style="overflow: auto;">longasssemailaddresstoolongtofitnormalcolumn@yahoo.com</td>
<td width="20px">normal@address.com</td>
<td width="20px">stuff</td>
<td width="20px">morestuff</td>
</div>
</tr>

Thanks guys,
Chris

WartookMan · Jan 13, 2004

Firstly, you forgot the closing [ignore]</div>[/ignore] at the end of the email address...

Pete.

Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

nix45 · Jan 13, 2004

Same result...

<table border="1" width="50px">
<tr>
<td style="width: 20px;"><div style="overflow: auto;">longasssemailaddresstoolongtofitnormalcolumn@yahoo.com</div></td>
<td width="20px">normal@address.com</td>
<td width="20px">stuff</td>
<td width="20px">morestuff</td>
</tr>
</table>

Am I doing something wrong here?

Thanks,
Chris

WartookMan · Jan 13, 2004

Try - I've added the scrolling "feature" to each entry...

Code:

<table border=&quot;1&quot;>
  <tr align=&quot;center&quot; valign=&quot;top&quot; height=40>
    <td><div style=&quot;height: 100%; width: 50; overflow-x: auto;&quot;>longasssemailaddresstoolongtofitnormalcolumn@yahoo.com</div></td>
    <td><div style=&quot;height: 100%; width: 50; overflow-x: auto;&quot;>normal@address.com</div></td>
    <td><div style=&quot;height: 100%; width: 50; overflow-x: auto;&quot;>stuff</div></td>
    <td><div style=&quot;height: 100%; width: 50; overflow-x: auto;&quot;>morestuff</div></td>
  </tr>
</table>

Pete.

Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

ChrisHunt · Jan 14, 2004

Make that
[tt]
<table border="1">
<tr align="center" valign="top" height=40>
<td><div style="height: 100%; width: 50px; overflow-x: auto;">longasssemailaddresstoolongtofitnormalcolumn@yahoo.com</div></td>
<td><div style="height: 100%; width: 50px; overflow-x: auto;">normal@address.com</div></td>
<td><div style="height: 100%; width: 50px; overflow-x: auto;">stuff</div></td>
<td><div style="height: 100%; width: 50px; overflow-x: auto;">morestuff</div></td>
</tr>
</table>
[/tt]
it seems to make a difference in IE6.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

Vragabond · Jan 14, 2004

Another thing you might want to change is overflow-x: auto; to overflow: auto; overflow-x is a IE only property and it won't work in other browsers.

Actually, this is the same code I proposed earlier, I just did not have time to test it on anything else than Mozilla before. Mozilla (and Opera) had no problems rendering my original code, but I noticed IE has problems with understanding width: 100%; (the default value for div element) in this case.

Code:

<div style=&quot;height: 100%; width: 50px; overflow: auto;&quot;>longasssemailaddresstoolongtofitnormalcolumn@yahoo.com</div>

This code should convince even IE.

nix45 · Jan 14, 2004

Thanks guys, it works great except for one problem. Everything is perfect in Opera and Mozilla, but in IE, in some of the columns, all you see is the scroll bar and thats it. Here's the code I'm using...

<table border="1">
<tr>
<td width: 10px><b>Select</b></td>
<td width: 10px><b>Number</b></td>
<td><div style="width: 200px; overflow: auto;">From</b></div></td>
<td width: 100px><b>To</b></td>
<td width: 100px><b>Subject</b></td>
<td width: 50px><b>Reason</b></td>
<td width: 50px><b>Date/Time</b></td>
</tr>

As you can see, I only need the overflow in the From column.

Thanks,
Chris

Wullie · Jan 14, 2004

Hi mate,

You have not specified a height, so the browser doesn't know you want to show any more:

<td><div style="width: 200px; height: 30px; overflow: auto;">From</b></div></td>

Hope this helps

Wullie

http://www.freshlookhosting.com

http://www.tutorial-world.com

http://www.freshlookdesign.co.uk

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell

ChrisHunt · Jan 14, 2004

Also, it won't like
[tt]
<td width: 10px>
[/tt]
you need either
[tt]
<td width="10">
[/tt]
or (better)
[tt]
<td style="width: 10px">
[/tt]

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

nix45 · Jan 14, 2004

After a lot of tweaking, I finally came up with a combination that the 3 browsers can live together with...

<table border="1" width="100%">
<tr height=100%>
<td style="width: 10px;"><b>Select</b></td>
<td style="width: 10px;"><b>Number</b></td>
<td><div style="height: 40px; width: 200px; overflow: auto;">From</b></div></td>
<td style="width: 100px;"><b>To</b></td>
<td style="width: 250px;"><b>Subject</b></td>
<td style="width: 50px;"><b>Reason</b></td>
<td style="width: 50px;"><b>Date/Time</b></td>
</tr>

What a pain in the ___! Everything was perfect in Opera and Mozilla, then I made a change to make it look better in IE, which made it look like crap in Mozilla/Opera. I was going back and forth until I found the happy medium above.

Thanks everyone for the help,
Chris

medic · Jan 14, 2004

For more info, check out this FAQ:
faq215-4499

WartookMan · Jan 14, 2004

Medic - tried out your code from the FAQ in Netscape Navigator/Communicator 4.73... and it didn't quite work (actually at all). So, I thought, perhaps it is just NN4.73.

But according to Bradsoft's Top Style 3.1, it suggests that the "table-layout:fixed" tag is only supported by IE6, and that it isn't supported by (not even partially):
1. CSS1
2. IE4
3. NS4
4. O7

Pete.

Web Developer / CMS (Aptrix / LWWCM) Consultant
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

medic · Jan 14, 2004

WartookMan,

I used NN6, IE6, and the latest Opera version to test that code. Thanks for informing me of existing browsers which do not support the style. If only I could get copies of those older browser versions, it might help me tweak and improve the code to support a wider group of browsers.
I'll start looking for those old browser to enhance my FAQ solution.

Thanks,

Medic

ChrisHunt · Jan 15, 2004

"table-layout:fixed" is an official CSS2 property - it should work in modern browsers, it probably won't in older ones.

I wouldn't lose too much sleep over it - hardly anybody uses v4 browsers any more, and those that do will still see your table, it just won't have its size constrained as you would like.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

nix45 · Jan 16, 2004

Thanks medic, that works well too.

Chris

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

force width of a column in a table 6

MIS

Technical User

Programmer

Programmer

MIS

Technical User

MIS

Technical User

Programmer

Programmer

MIS

Programmer

Programmer

MIS

Programmer

Technical User

Programmer

Programmer

MIS

Similar threads

Log in

Part and Inventory Search

Sponsor