[thelist] Absolute positioned element inside a <td> that has overflow:hidden

Bill Moseley moseley at hank.org
Mon Aug 16 14:51:57 CDT 2010

On Mon, Aug 16, 2010 at 12:13 PM, Frank Marion <lists at frankmarion.com>wrote:

> You have random cells that may or may not display strings that might exceed
> the side of a td. You want to create a sort of disclosure div, so that if
> the user sees "this is some really long text and to [more]". When they hover
> or click, it expands the div so that they can see the rest of the data. Sort
> of a tool-tips deal.

Close.  Replace the "this has a popup" text in the <td> with something the
browser won't wrap.


So, in that case I added overflow: hidden on the <td>, but in all but IE
that prevented the popup absolute positioned box from displaying outside the

So, the solution seems be
 <td overflow:visible position:relative>
    <div overflow:hidden>table cell text that might be
toooooooooooooooooooooooooooooooooooo long</div>
    <div position:absolute>popup box</div>

*IF* that's the case, and you can use js, is there some reason you don't use
> overflow as an on-off switch, as seems to be the natural behaviour right
> now?

You mean toggle the overflow with js?  No, the purpose of the box is not to
display the potentially overflowing text.

Bill Moseley
moseley at hank.org

More information about the thelist mailing list