Show/Hide of TD upon MouseOver/Out

[Csaba Gabor]

I have (a column of) cells in a dynamically built
table where the contents of each TD from the (column
of) cells should be displayed when the mouse is over
the TD. This works fine (code below) by
encapsulating the contents in a DIV and then toggling
the div.style.display between "" and "none" upon
onMouseOver and onMouseOut in the parent TD.

My only problem with this is that the table's column
widths are not adjusted to accommodate the new data.
In particular, since the column is initially narrow since
all entries are hidden, when individual cells are shown,
they are expanded as a long skinny column.

What's a good way to have the column widths be
adjusted upon display of the individual TD's that will
work in both IE 6+ and FF 1.5+?

Thanks,
Csaba Gabor from Vienna
PS. I prefer to keep the table paradigm
PPS. If the code below is unclear a more concrete
example needed, let me know.

// newRow is the Table row being built
// a show/hide cell is to be appended to this row

// tmpDiv is a dummy element containing a dummy table
// with a cell matching the characteristics we want to insert
var tmpDiv = document.createElement("DIV");

// definition of the TD being built
var tdFlipperHTML =
"<td onMouseOver='this.firstChild.style.display=\"\"' " +
"onMouseOut='this.firstChild.style.display=\"none\"'></td>";

// now build the TD inside the dummy table
tmpDiv.innerHTML = "<table><tr>" + tdFlipperHTML + "</tr></table>";

// now transfer the TD to the real destination table
var cell=newRow.appendChild(tmpDiv.firstChild.rows[0].cells[0]);

// now give the cell some content:
showHideContent = "Now you see me, now you don't";
cell.innerHTML = "<div>" + showHideContent + "</div>";