オーバーフローのあるセルを含むスケーラブルなテーブルを作成します。

Question

スケーラブルなレイアウトで表形式のデータを表示するテーブルがあります。テーブル自体の幅は100％です。

カラムの1つに、まれにしかユーザデータには、テーブルをそのコンテナの外に引き伸ばす長い文字列が含まれます。

私の解決方法は、そのセルの内容をdivに入れ、divにmax-width:320pxとオーバーフロー：autoを与えることでした。 IE9とFF7のこの作業は、私が心配している2つのブラウザです。

<table style="width:100%;"> 
    <tr> 
    <td> 
     <div style="max-width:320px; overflow:auto;"> 
     ReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainer 
     </div> 
    </td> 
    </tr> 
</table> 

ただし、私の好みは、列の内容を最大幅320pxに制限することではありません。私はむしろdivが必要に応じてテーブルと一緒に伸び、テーブルがもはや画面にフィットしなくなるとオーバーフローするだけです。これは可能ですか？

Answer 1

divに最大幅100％を与えてテーブル全体に配置してみませんか？私は隠されたこの前に設定されているオーバーフローのために行われ、あなたがホバー場合は、あなたがそれを見ることができるように、altテキストに完全な文字列を入れている何

<div style="max-width:100%; overflow:auto;"> 
    <table style="width:100%;"> 
     <tr> 
     <td> 
ReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainer 
     </td> 
     </tr> 
    </table> 
</div> 

Answer 2

http://jsfiddle.net/wJUyL/

。私はあなたのために何が起こっているのか分からないが、時にはその何かを使う。

もしそうでなければ、jqueryを使用してみてください。隠すエフェクトはそれを行う良い方法です。希望が助ける