CSS: position:absolute inside position:relative, but not affecting parent?

Question

<style>
.special p { display:none; }
.special:hover p { display:block; }
</style>

<table>
  <tr>
    <td style="width:200px">Things</td>
    <td style="position:relative; width:220px">
      <div style="position:absolute;right:0" class="special">
        <img id="shows" />
        <p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
      </div>
    </td>
  </tr>
  <tr>
    <td style="width:200px">Things</td>
    <td style="position:relative; width:220px">
      <div style="position:absolute;right:0" class="special">
        <img id="shows" />
        <p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
      </div>
    </td>
  </tr>
</table>

Can I make this work? Ie, can I make the #special p expand over the top of 'Things'? As I currently have it set up #special won't ever grow outside the 220px wide td. Any ideas?

Answer 1

I am still not fully clear, but try this. This will allow the TD to grow when the content is displayed.

<table>
  <tr>
    <td style="width:200px">Things</td>
    <td style="text-align: right;">
      <div class="special">
        <img id="shows" />
        <p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
      </div>
    </td>
  </tr>
</table>

Answer 2

I'm not 100% sure what you are trying to achieve, but wow about taking away the position: relative from the td and making the .special p s position: absolute but not the special elements themselves?

That way, your special elements will be in the normal table flow, and the paragraphs popping up will leave the table cell's boundaries.