セルの高さを伸ばさずにテーブルセル内の固定高さdiv

Question

セルの高さが固定されているテーブルがあります。テーブル内には、固定された高さを持つdivもあります。その高さがセルの高さを超える場合は、セルの高さが伸びずに、セルからオーバーフローするようにしたいと思います。 、それは瞬時に与えられた出発点です）。例えば

：

<table> 
    <tr> 
     <td> 
      <div> 
       12345 
      </div> 
     </td> 
     <td></td> 
    </tr> 
</table> 

table 
{ 
    width: 90%; 
    margin: 10px; 
} 

td 
{ 
    width: 50%; 
    border: 1px solid blue; 
    padding: 5px; 
    height: 100px; 
    vertical-align: top; 
} 

div 
{ 
    height: 250px; 
    width: 75%; 
    border: 1px solid red; 
} 

これは、DIVの高さに応じて拡張する表のセルの高さをもたらしました。

私は（これjsFiddle exampleを参照）のdivにposition: absoluteを追加、およびTDにposition: absolute、それはChromeとIEでのトリックをやってみました：

しかし、Firefoxでposition: absoluteが発生代わりに、セル幅のウィンドウ幅に関連するdiv要素の幅：

どのようにこれを修正できますか？私はposition: absolute以外の解決策を探しています。あるいはFFでdivの幅を取得する方法です。

Answer 1

あなたは表のセル内の余分なdiv要素を使用して必要なものを達成することができます：

CSS：

table 
{ 
    width: 90%; 
    margin: 10px; 
} 

tr 
{ 
    height: 100px; 
} 
td 
{ 
    width: 50%; 
    border: 1px solid blue; 
    padding: 5px; 
    height: 100px; 
    vertical-align: top; 
    position: relative; 
} 

div.outer { 
    height:100px; 
    max-height: 100px; 
    overflow: visible; 
    width: 100%; 
} 

div.inner 
{ 
    height: 250px; 
    width: 75%; 
    border: 1px solid red; 
} 

HTML：

<table> 
    <tr> 
     <td> 
      <div class="outer"> 
       <div class="inner"> 
        12345 
       </div> 
      </div> 
     </td> 
     <td></td> 
    </tr> 
</table> 

私はあなたのjsfiddleをフォークデモのために：http://jsfiddle.net/dyes5/1/

Answer 2

TDにoverflow:hiddenを設定します。

http://www.w3schools.com/cssref/pr_pos_overflow.asp