HTMLテーブルは、長いテキスト

Question

では動作しません。私は、次のような構造

<table cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
    <td style="width:60px;"> 
     ... 
    </td> 
    <td> 
     <div style="width:100%;overflow-x:hidden;"> 
      PROBLEMS ARE HERE 
     </div> 
    </td> 
</tr> 
... 
</table> 

を持っている最初のTDが60PXをとり、もう一つは100％の残りがかかりますが、私はいくつかの長いを持っている場合空白もダッシュもないテキストは、表が100％大きくなります。 破損しないテキストを1行または複数行に表示するには（両方とも可）、テーブルを画面の100％に保持する方法はありますか？ これをオーバーフロー隠しで修正しようとしましたが、効果がありません。 問題のスクリーンショットは次のとおりです。link

Answer 1

設定table-layout : fixedあなたのCSSや、それを修正ダメ<table style='table-layout : fixed'>に。

ここにはcode sampleがあります。見てみな。

Answer 2

CSS3プロパティword-wrap:break-word;があります。しかし残念ながら、それは表のセルでは機能しません。私はテーブルレスデザインを選択して、あなたの構造を再考する必要があると思います。

私はあなたのための

<style> 
section { /* your table */ 
    display:block; 
    width:300px; 
    background-color:#aaf; 
} 
section:after {display:block; content:''; clear:left} 

div { /* your cells */ 
    float:left; 
    width:100px; 
    background-color:#faa; 
    word-wrap:break-word; 
} 
</style> 

<section> 
    <div>Content.</div> 
    <div>Loooooooooooooooooooooooooooooooooooooooong cat.</div> 
</section> 

P.Sこの例を書いた：word-wrapはIE 5.5以降、Firefoxの3.5+でサポートされている、そのようなChromeとSafariなどのWebKitブラウザれます。

Answer 3

は、次のことを試してください。

<table style="word-break:break-all;" cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
    <td style="width:60px;"> 
     ... 
    </td> 
    <td> 
     <div style="width:100%;overflow-x:hidden;"> 
      PROBLEMS ARE no longer HERE ! 
     </div> 
    </td> 
</tr> 
... 
</table>