テーブルセルの高さを拡張せずに、テーブルセルの内容を垂直方向にオーバーフローさせるにはどうすればよいですか？

Question

私は内部にdivのテーブルセルを持っています。私はdivがテーブルのセルの外側にオーバーフローするようにします。これをどうすればいいのですか？明らかにするために、テーブルセルの高さをdivで拡大したくありません。以下のコードは私が試したものですが、うまくいきません。

HTML：

<table> 
    <tr class="row"> 
     <td class="cell"> 
      <div class="overflow">Overlow outside of this cell</div> 
     </td> 
    </tr> 
</table> 

CSS：

.row { 
    height:24px; 
    overflow:visible; 
} 
.cell { 
    overflow:visible; 
    max-height:24px !important; 
} 
.overflow { 
    height:24px; 
    font-size:12px; 
    clear:both; 
    white-space: nowrap; 
    line-height:16px; 
    zoom:1; 
    text-align:left; 
    overflow:hidden; 
} 

Answer 1

私は右のあなたを取得する場合、これは役立つかもしれない：

Fiddle

HTML：

<table> 
    <tr class="row"> 
     <td class="cell"> 
      <div class="overflow">Overlow outside of this cell</div> 
     </td> 
    </tr> 
</table> 

CSS：

.row { 
    height:24px; 
    overflow:visible; 
} 
.cell { 
    overflow:visible; 
    max-height:24px !important; 
    border: 1px solid #cccccc; 
    width:10px; 
} 
.overflow { 
    height:24px; 
    font-size:12px; 
    line-height:16px; 
    position:absolute; 
}