IE slowdown when using a table with 500+ rows

Do you guys have some tips to make any large table, with 500+ rows, display quicker in Internet Explorer?

This is how I'm doing it right now:

The result of the MySQL query returns 500+ rows, so I use to a while loop with the following to display all the rows:

echo "<tr class='someMainClass' bgcolor='".$someBgColor."'>";
echo    "<td width='10px' style='display: none;' class='someClass'>String</td>";
echo    "<td class='someClassAgain andOtherClass' title='someTitle' >String again</td>";
echo    "<td width='100px' class='ClassAgain' id='>another string</td>";
echo    "<td width='100px' class='ClassAgain' title='title'><input type='text' value='and i input'/开发者_JAVA百科></td>";
echo "</tr>";

When the list is done, IE just freezes for a couple of seconds and then the list appears. In addition to this any hover effect on the <tr> works really slowly.

I'm not sure why this slow motion is being caused in IE as all other browsers work perfrectly.

Any help would be greatly appreciated.

Remember that most IE users aren't aware that their experience is subpar, they are used to it.

The best way might be to implement pagination, either server side, or via javascript.

Unfortunately it's going to be a problem with IE... You're better off somehow gracefully degrading for IE. Maybe just show the first 50 rows and implement pagination.

Save the data in a javascript object, load the first 20 (or however many take up the page), wait for document.ready and then start plugging the rest of the rows in with javascript. You could even plug the rows in as the page is scrolled.

A lot of work to make it look good in such a piece o' crap browser.

Rendering 500 rows on one page is a bad idea no matter what browser you are using, even though it might work better in Safari, Firefox and Chrome compared to IE. From a usability point of view it's horrible too.

So a better approach would probably be to re-think the solution and introduce pagination instead. Maybe 50 rows per page? or something.

Try to limit the markup. Remove all the width, style, id, etc, attributes, then make a script to populate these after the HTML is loaded. Scrap the style and width, go with classes. Remove extra spaces.

You can impliment it only showing what you need as you scroll through ajax, something like this tut, or even this tut.

But really IE just is awful. Having that much HTML is just so much for a simple little browser to handle...unless of course its not garbage.

The :hover pseudo-selector on non-anchor elements is known to make IE7 and IE8 slow in some cases*. When a strict doctype is not used, IE7 and IE8 will ignore :hover on any element other than anchors. When a strict doctype is used, :hover on non-anchors may cause performance degradation.

Source

Try using table-layout: fixed in your CSS:

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

That should speed up the initial rendering but you'll have to manage the column sizes by hand. Table column sizing usually requires a full scan of the table and then some negotiation if there isn't enough room to accommodate the natural widths of all the columns; using a fixed layout avoids the scan and the negotiation by statically setting the widths right away and then making all the cells comply whether they like it or not.