Member Avatar for Dat0

I'm trying to absolute position a p element inside a table. I tried to make <td> have position relative but it doesn't seem to work.

<td style="position:relative;">
<p style="position:absolute; bottom:0px;"
</td>

Does not work! But this does..

<td>
<div style="position:relative";>
<p style="position:absolute; bottom:0px;"> Success </p>
</div>
</td>

I'm confused why td cant be relative and if using a DIV to absolute position elements inside a <td> is the only option?

Edited by Dat0 because: n/a
  • 3 Contributors
  • 3 Replies
  • 114 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by SKANK!!!!!

Dani AI

Generated

Quick clarification: td elements can be positioned. The CSS spec lets a non‑static ancestor become the containing block for absolutely positioned descendants, so a table cell with position: relative should work in modern browsers. When it "doesn't work" the usual causes are a simple markup error, a quirks/doctype issue, or an older browser bug — not a prohibition on positioning table cells. 's post shows the problem was solved, and 's wrapper suggestion is a perfectly reasonable fallback; found it useful too.

Troubleshooting checklist

A robust pattern (keeps CSS separate and avoids inline styles)

<style>
td.pos { position: relative; padding-bottom: 1.5em; }
td.pos .badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
}
</style>

<td class="pos">
  Cell text
  <span class="badge">Note</span>
</td>

Notes and caveats: absolutely positioned children are removed from the normal flow and will not expand the cell height; add padding/min-height if the visual layout depends on it. If you must support very old IEs or encounter odd behavior, keep the small wrapper (a relatively positioned DIV/span) — it is simple and reliable.

Recommended Answers

All 3 Replies

Member Avatar for Airshow

Dat0,

I think you will find that css position is inhibited from being applied to table cells because it would at least potentially cause confict/ambiguity with regard to the layout of the rest of the table. After all, TDs are by definition block-like elements that are positioned relative to their neighbours.

However, as you have discovered that the contents of table cells can be relatively/absolutely positioned.

I think you have come up with a good solution.

Airshow

Edited by Airshow because: n/a
Member Avatar for Dat0

Thank you. solved.

Member Avatar for SKANK!!!!!

thanks i also got off on this one!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.