Getting newly visible table data to not change column width

Question

I have a table in which in one column some content is initially hidden, but appears on hover. The problem is that on hover the content then resizes that column's width and distorts the table.

How can I set the column to not resize itself without setting table layout: fixed or setting a width.

The table layout fixed causes columns to size themselves in unnatural ways, using only the first row, which is unacceptable due to the large variations in content length in different rows.

Is there a way to allow the table to size widths according to the longest column of any row, and then disallow resizing when it's hovering.

I'm using css hover to do my show hide if that's relevant. Thanks.

Answer 1

Hide the content using a div or a span which "covers" the column instead of hiding the actual content itself.

Answer 2

Why don't you just change the opacity attribute on hover, rather than the display attribute? So to reveal the content you would change opacity from 0 to 1, and to hide it from 1 to 0.