Using Position Relative/Absolute within a TD?
I have the following code:
<td style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
</td>
This does not work at all. For some reason, the position:relative command isn't being read on the TD and the notice DIV is being placed outside of the content container at the bottom of my page. I have tried to put all the contents of the TD into a DIV such as:
<td>
<div style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
</div>
</td&开发者_运维技巧gt;
However, this creates a new problem. Since the height of the contents of the table cell is variable, the notice DIV isn't always at the bottom of the cell. If a table cell stretches beyond the 60px marker, but none of the other cells do, then in the other cells, the notice DIV is at 60px down, instead of at the bottom.
This is because according to CSS 2.1, the effect of position: relative
on table elements is undefined. Illustrative of this, position: relative
has the desired effect on Chrome 13, but not on Firefox 4. Your solution here is to add a div
around your content and put the position: relative
on that div
instead of the td
. The following illustrates the results you get with the position: relative
(1) on a div
good), (2) on a td
(no good), and finally (3) on a div
inside a td
(good again).
<table>
<tr>
<td>
<div style="position:relative;">
<span style="position:absolute; left:150px;">
Absolute span
</span>
Relative div
</div>
</td>
</tr>
</table>
This trick also suitable, but in this case align properties (middle, bottom etc.) won't be working.
<td style="display: block; position: relative;">
</td>
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
With regards to your second attempt, did you try using vertical align ? Either
<td valign="bottom">
or with css
vertical-align:bottom
also works if you do a "display: block;" on the td, destroying the td identity, but works!
精彩评论