Dean 0

Hey, I am looking for a way to absolutely position a <div> element within <td> element.

Is it possible?

4 answers

danwellman 5600
This was chosen as the best answer

Put a realtively positioned div inside the td, with width and height set to 100%, then put the absolutely positioned div inside the relative div.

The td might need to have a specific height attribute set on it for height 100% to work correctly...

You're not using the table for layout purposes though right ;)

Answered over 7 years ago by danwellman
  • Great! That's what I did eventually, I was just wondering if there was a more simple way to do it, with less elements, but you gotta do whacha gotta do. Table for layout? Hello no! I was using CSS from the day i wrote my first HTML page :) This Is just a case were there is an actual table in the page. Anyways, thanks! Dean over 7 years ago
  • no worries :) danwellman over 7 years ago
Ezra 5

You will need to give the

**td {position:relative}**

and the

**div {position:absolute}**
Answered over 7 years ago by Ezra
Rolf 0

You could create a wrapper DIV with width 100% and height 100% inside the TD, and set it as position:relative, then you can simply do your absolute positioning inside that.

You can also use a number of other workarounds/tricks to emulate absolute positioning:

  • If you want your DIV to stick to the right of the td (as in absolute and right:0), set "direction:rtl" in css (direction: right to left - originally for right to left language but useful in this situation).
  • If you want your div to stick at the top or bottom of the TD (as in top:0 or bottom:0 in absolute positioning), use vertical-align:top (or bottom) in the CSS for the TD.
  • If you don't want the size of your TD to change according to the DIV inside it, set overflow:hidden on the TD and table-layout:fixed on the table. Of course explicitely set the width of the TD and the width and height of the DIV.
  • You can arrange the position of your DIV inside the TD using the margins on it.

With all these I believe you can do pretty much anything you can do with absolute positioning, with even one advantage: such a DIV will still trigger the browser scroll-bars when it exits the view-able browser area, as opposed to absolutely positioned DIVs.

Answered almost 7 years ago by Rolf
Dean 0

That doesn't work, it seems <td> cannot be positioned relative.

Any ways to bypass it?

Answered over 7 years ago by Dean