Question

Whenever I try to absolutely position a TD inside a TR, the TD’s top: and left: CSS properties align it with the page or the table as reference and not its direct parent (TR with position:relative set).

Here’s my code. (notice the first TR is at the bottom of the result window due to this issue) I am trying to align the TD with the “Headline” text to take 50% of the row and the “Text” to take up the remaining 50%.

I realize this can be done by moving both elements inside a single TR and placing them in two TDs, but the HTML code is generated server-side in this case, so I am stuck to trying to achieve this via CSS. Basically, modifying the HTML code is not an option.

Answer 1

Use display:inline.

I just added table tr {display:inline} to your code and its done 😉 demo Fiddle

But really For layouts tables are evil dont use them
http://phrogz.net/css/WhyTablesAreBadForLayout.html