Table Cell Wrap-Around Question

If I have a table cell with a specific width and text that will wrap around to several lines.  Does the browsers have any logic on how they decide where to break a line or is just based on the number of characters that fit until the width is met.  In other words, will a long word be broken in a wrap around situation or does the browser try to look for spaces to break on?

Or is it the job of the server side application to parse the text and put line breaks in the text (based on some number of characters for the width?)

I seem to have a little trouble with IE(7) when I have a table with a few columns and the first column has text that wraps around.  IE seems to push the width wider before it wraps around the text then all the other browsers.

I had to create (server side) 2 versions of the product items table at the bottom of the page.  one for IE and one for the rest of the browsers with different widths as a result.  See examples below:

Code that accomodates both IE and other browsers (different widths):

Code that looks differently in IE versus other browsers (the problem)

Any advise would be appreciated!!
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

The display is purely done by the browser and different browsers will display in different ways.  All browsers will however attempt to text wrap where there is a space.
hefterrAuthor Commented:
Hi probso,
Thanks for the answer.

Are you aware of IE having trouble with this (exceeding the defined width) when there are multiple columns?


Both of your links look the same to me except for one extra line on one of them.

A browser will generally break text at a space on a long line... it wont break a word up. You can manually force line breaks using <br /> which puts a line break in.

If you put in a cell width but then have a really long word or url in it, the browser will expand the cell pretty much no matter what.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

hefterrAuthor Commented:
Hi Snarflies,
Take a careful look at the 2 links under IE7.  Notice in the "test_" version, the "Delivery" column (and all that follow) are pushed over about 50 pixels to the right?

In the other version, I have server side code for IE to change the dimension of the table to shorten the first column so when it pushes out, it goes to where I want it.

Under Firefox or Chrome they will all look the same.

Hi Hefterr

Sorry I missed the ie part due to it being quite late at night :)

I see what you mean in ie7.

So what is your actual overall objective? How should it look in ie7?


hefterrAuthor Commented:
Hi Snarfles,
I guess my overall objective is to have one set of HTML work in all browsers.  I have to use a separate version for IE as I seems to handle the wrap around issue differently from all the other browsers by expanding the width of the column.

Is there a more accepted approach?

Hi Rich

Ultimately if you are going to try and code only using tags and styles that is accepted in all browsers you will be fighting a losing battle.

Instead take a slightly different approach. What I tend to do is develop in firefox untill you are happy with it. This will mean it will look good in 99% of non ie browsers (kind of..). Then  what I do is add css specifically for ie like so

<!--[if IE 7]>

<link rel="stylesheet" type="text/css" href="/css/ie7.css" type="text/css" />


In that ie7.css file you then redeclare the classes that need changing for ie7. make sure this line is below where you include your main stylesheet. The above makes everything clean enough.

Sorry if you know all of the above, just thought it worth mentioning.

You also need to remember that no matter what you try to do you are going to have differences and there are some things you just have no control over. I personally wouldn't worry about where text wraps in a table cell unless it detracts visually.

So I guess the above doesn't really answer the question though. Are you wanting all browsers to wrap like in 'test_' or like in the original?



Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hefterrAuthor Commented:
Hi Luke,
I wanted everything to look like the current "original" - which I added server side code to create different table widths if I detect (via the cgi.referrer) it is an IE browser.

Your technique is fine too if I code the width of the tables in css.  

I guess the bottom line is that IE handles this wrap-around issue differently from all the other major browsers and you have to accompodate for it one way or another.

Q:  How do you use your css technique if Firefox is the only browsers not working like the rest?  It seems only IE allows for you to test within the HTML.  Unless you can do it with Javascript?

Hi Rich

I must admit I haven't looked at your site in browsers other than ff 3.6 and ie7. I use FF and develop in FF and then check other browsers and make sure they look the same as FF... not the other way around. FF and other non IE browsers should all generally support the same tags and css as they generally comply with web standards, whereas ie usually never does, which is why you have to add hacks in to get ie7/ie6 to display correctly. You will notice slight differences in how a browser renders code from say firefox to safari to opera, which you have no control over, but they should all generally work and there wont be a huge break anywhere.

One other tip I have is to use the site for cross browser testing. It will take screenshots of a page from different browsers and platforms so you can quickly test a page.


It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.