CODEWITHSUNDEEP
csshtml-tablecss-position
zergussino
zergussino

Reputation: 821

Absolute positioned element inside of table cell with variable height

There are quite a number of questions here on stackexchange on the absolute positioning inside TD, but I didn't find solution for my specific issue:

I need to implement following layout layout of elements inside TD

This cell is part of tabular data representation in table.

Content of the cell is text data.

Text can be multi-line and has to be vertically and horizontally center aligned. Height of cell may vary as table row height may be stretched by other cells' content, but cell text should always stay vertically aligned (currently it's achieved by vertical-align: middle)

Absolutely positioned element should always reside in the top-right corner of the cell.

I know about technics of placing relative div inside TD and then placing absolute positioned element inside div, but due to variable cell height and requirement of vertical-aligned cell text it seems not an option.

Solution need to be compatible with IE8+, Chrome 21+ and FF 15+

Upvotes: 3

Views: 3098

Answers (1)

Thijs Kramer
Thijs Kramer

Reputation: 1117

Insert a div around your closebutton:

<table>
    <tr>
       <td>
          <div class="wrapper">
              <div class="close">X</div>
          </div>
          My vertically aligned text.
       </td>
    </tr>
</table>

And then position your closebutton:

table td div.wrapper {
    position: relative;
}

table td div.close {
    position: absolute;
    right: 0;
    top: 0;
}

Upvotes: 2

Related Questions