colgroup + style + mouse over/out in table = sluggish response

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Hi All,

I have a page that displays a table with rows whose color changes when
you roll over them. Here is the style and script tags from the table:

<style type="text/css">
    .highlight {
        background:        #eeeeee;
    .unhighlight {
        background:        white;
    .spacer {
        width:             0.5%;
    .hyphen {
        text-align:        left;
        width:             2%;

<SCRIPT type="text/javascript">

function mouseOutRow(row) { = 'default';
    if (row.bgColor != "#dddddd") {
        row.className = "unhighlight";

function mouseOverRow(row) { = 'hand';
    if (row.bgColor != "#dddddd") {
        row.className = "highlight";

And here is a cut down version of the <table> tag:

<table width="100%" cellpadding="0" cellspacing="0">
<tbody style="font-size: 10px;font-family: sans-serif;">
<tr style="display:table-row;"  onMouseOver="mouseOverRow(this);"
onMouseOut="mouseOutRow(this);"><td>col one</td><td>col two</td></tr>

Make about 300 of those table rows (I have different content in them of
course: this is just an example) and the resulting page is quite slow:
the mouse over/out actions is very sluggish.

I have worked out that if I remove the style in the tbody OR the
colgroup tags, it is much faster.. but I need to style the text and I
need the colgroup tags because on some versions of the page I hide

Any ideas on how I can have both my styling and colgroups with ok

All thoughts welcome!


Site Timeline