ワイドテーブルセルを切り捨てる（隠す）方法はありますか？

Question

私はブラウザの幅全体にまたがるテーブルを実現しようとしています。

この表には3つの表セルが含まれています。 最初と最後のセルは「固定」です。つまり、ブラウザウィンドウの左端にある最初のセル、ブラウザウィンドウの右端にある最後のセルです。

2番目のセル（中央）には、複数のセルと長さ/幅の異なるテーブルが1つ含まれています。この表を "content-table"としましょう。

このように見えるかもしれません。

[最初のセル] | [コンテンツ1 |コンテンツ2 |コンテンツ3 |コンテンツ4] | [最後のセル]

"コンテンツテーブル"には多くのコンテンツが含まれている可能性があります。 「最初のセル」と「最後のセル」は常に表示されなければならないので、特大の「競合テーブル」は部分的に隠されるべきです。

最後に、「オーバーフロー：隠し」のようなものが必要ですが、これはテーブルセルでは機能しません。すべてのアイデアなし - 私は昨日からこの問題に取り組んでいるhttp://jsfiddle.net/thirtydot/YRgwB/3/

：（？それは動作しないようにそれが見える）

を、私は、問題を表示する小さなjsfiddlを持っています！

ご希望の場合は、ここをクリックしてください。

Answer 1

を参照してください：http://jsfiddle.net/thirtydot/YRgwB/6/

• 私はあなたの外側tableにwidth:100%; table-layout:fixed;を追加しました。
• divを「ワイドテーブル」の周りにoverflow: hiddenでラップしました。
• これは現代のすべてのブラウザで機能します。

<table border="1" style="width:100%; table-layout:fixed;"> 
    <tr> 
     <td>first cell</td> 
     <td> 
      <div style="overflow:hidden; border:1px solid red;"> 
       <table> 
        <tr> 
         <td style="min-width:90px;">lot</td> 
         <td style="min-width:90px;">of</td> 
         <td style="min-width:90px;">content</td> 
        </tr> 
       </table> 
      </div> 
     </td> 
     <td>last cell</td> 
    </tr> 
<table>