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

[relaxedrob]

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%;
}
</style>


<SCRIPT type="text/javascript">

function mouseOutRow(row) {
document.body.style.cursor = 'default';
if (row.bgColor != "#dddddd") {
row.className = "unhighlight";
}
}

function mouseOverRow(row) {
document.body.style.cursor = 'hand';
if (row.bgColor != "#dddddd") {
row.className = "highlight";
}
}
</SCRIPT>

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

<table width="100%" cellpadding="0" cellspacing="0">
<colgroup><col></col><col></col><col></col><col></col><col></col></colgroup>
<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>
</tbody></table>

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

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

All thoughts welcome!

Rob