Can I fully position the element in the upper right corner of the <td> element?

Question

I have a table, and I need the cells to be in the upper right corner of each cell.

I read a few other questions asking the same thing, but none of them seem to fix the problem.

One solution that I read says to wrap the inside of the cell in a div with relative positioning, but this does not work because the div does not fill the whole cell, even with the height and width set to 100%.

Another solution I read says to manually set the height of the cells and manually set the height of the div to the same value. This does not work for me either because the tables are dynamically generated, and I cannot guarantee a specific size for the cells.

Here is some code that illustrates the problem:

<table border="1"> <tr> <td> <div style="position:relative; height: 100%; background: yellow;"> <p>This is some content</p> <div style="position:absolute; right:0px; top:0px; background: red;"> absolute </div> </div> </td> <td> <div style="position:relative; height: 100%; background: yellow;"> <p>This is some content</p> <p>This is some content</p> <p>This is some content</p> <p>This is some content</p> <p>This is some content</p> <p>This is some content</p> <div style="position:absolute;right:0px; top:0px; background: red;"> absolute </div> </div> </td> </tr> 

Here is what this example looks like http://jsfiddle.net/hqtEQ/

Is there a way to get a red div in the upper right corner of each cell?

Answer 1

Firefox seems to be the only browser that cannot absolutely position something directly in td with position:relative (due to error 63895 ). In other browsers there are no problems. And since version 22, Firefox supports the latest Flexbox syntax, which: a) can emulate table behavior, b) has no problems with position: relative . How about using Firefox only as a workaround?

 td { position: relative; background: yellow; } :-moz-any-link > html, tr { display: flex; flex-direction: row; } :-moz-any-link > html, td { display: flex; flex-direction: column; justify-content: center; } 

Fiddle

Answer 2

By default, vertical alignment a td centered; therefore, if you are not worried about the other content in the cell, just replace

 <td> 

with

 <td style="vertical-align: top;"> 

(or add a CSS class for this) and your layout will work as intended.

See http://jsfiddle.net/hqtEQ/1/