table collapse, or size is changing during the rendering of browser..


I have an html page which is rendered in .NET. The thing is in ie and chrome, when the table is loaded, it has a slight change in collapse as the size is moving (as if a cat is vomiting a last tar ball) and shows it properly in the end but it loses time to do.

What to do? Which css causes for this table behaviour?

LVL 12
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.

Alexandre SimõesManager / Technology SpecialistCommented:
Man... what on earth does a cat vomiting a tar ball have to do with an HTML table? :)

I have no clue about what you're talking about.
Do you have an example?
Chris StanyonWebDevCommented:
We're going to need to see this in action - a link to a demo of your problem would be ideal...
jazzIIIloveAuthor Commented:
ah, i solved i think. Thanks. What I have done is i assign a fixed width in td. Is this OK for different resolutions?

I cannot share a link or code since it's not public..

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!

Alexandre SimõesManager / Technology SpecialistCommented:
well... I have no clue about what you're doing but if you assign a fixed width it's most certain that it's not OK for different resolutions...

What makes the cat vomit, the content or the parent?
If it's the content, setting the width to 100% will solve...
If it's the parent you can also try to set the table itself to 100% avoiding it to resize if the content changes.

But anyway, with your information I'm just shooting in the dark here... :)
I suspect you are trying to manage layout with a table.  If that is the case then you will run into all kinds of problems trying to maintain it.  Tables are for the presentation of tabular data. Using them for anything else invites problems.  As for sizing, the table structure will adjusted to content and may sometimes ignore diminsions set in code.

actually it does solve such problems in cases due to the browser rendering the table before it gets all the rows. every time a cell is wider than all the above cells in the same column, the whole rendering changes. it was common to use the <rows> tags to solve this problem before css existed.

another way to get a better rendering consists in using buffering on the server. most likely this happens because the server takes a long time to compute the rows and the client receives them in chunks. generate the whole table before you send any output to the browser and you should not run into this problem any more either

with your solution in many cases you can identify only some rows that need to have a fixed width so you probably should not give widths to all of them

++ to the above restriction and espetially @cd's related to using tables for general layout if that is indeed what you are doing

@alexcode : using 100% width for tables is asking for trouble in most cases because the columns are not required to fill the table container
jazzIIIloveAuthor Commented:
Hi guys;


>>most likely this happens because the server takes a long time to compute the rows and the client receives them in chunks.


>> generate the whole table before you send any output to the browser and you should not run into this problem any more either

but i populate the rows of table during generation of table. I mean how can i generate the table totally before sending data? Can you elaborate?
either buffering is available in .NET or you can simply store the generated table into a variable and echo the whole thing in one go.

if it is really too long and you want some output to be visible before you have the whole thing,
- you may echo whatever number of row were computed every 2 seconds for example
- you may want to display the whole page and fill in the rows using ajax. like before, you can handle chunks sizes as you see fit. you may even implement scrolling in ajax.
- you can mix both the above by generating the whole layout, end then generating some js code that adds chunks of rows in the existing array
jazzIIIloveAuthor Commented:

great, any code examples for this?
how can i store the table in a variable? A simple code would suffice, i guess.

i have no idea about the language you use, but basically in pseudo-code assuming + stands for concatenation of strings

while get_next_row()
  buff = buff + "<tr><td>....</tr>"
print buff + "</table>"

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
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.