テーブルの最大幅を設定する

Question

テーブルの最大幅を設定しようとしていますが、動作していないようです。テーブル内の単語が長すぎると、テーブルの幅が自動的に拡大されます。どのように私は起こってからそれを停止し、代わりに次の行に行くにはあまりにも長い言葉を持っているのですか？

<style> 
 
table { 
 
max-width: 300px; 
 
} 
 
table,td { 
 
border: 1px solid red; 
 
} 
 
div { 
 
border: 1px solid blue; 
 
word-wrap: break-word; 
 
} 
 
</style>

<table> 
 

 
<tr> 
 
<td> 
 
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello </div> 
 
</td> 
 
</tr> 
 

 
</table>

Answer 1

あなたが動作するようにあなたのmax-widthを作りたい場合は、あなたがテーブルの上にCSSプロパティを設定する必要が

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Answer 2

次のルールあなたを追加します。 CSSセクション。 divの内側にMAX-wdithを置く

div{ 
    overflow-wrap: break-word; 
    max-width: 300px; 

Answer 3

は=問題を解決します）

<style> 
 
table,td { 
 
border: 1px solid red; 
 
} 
 
div { 
 
border: 1px solid blue; 
 
word-wrap: break-word; 
 
max-width: 300px; 
 
} 
 
</style>

<table> 
 

 
<tr> 
 
<td> 
 
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello </div> 
 
</td> 
 
</tr> 
 

 
</table>

Answer 4

word-wrap: break-word;あなたは、コンテナに割り当てられた幅を持っている場合、あなたはこのプロパティを適用している動作します。したがって、または希望の幅をdivタグに割り当てる必要があります。

<style type="text/css"> 
    div { 
     width: 100px; /* this will limit the length of the word to 100px */ 
     border: 1px solid blue; 
     word-wrap: break-word; 
     } 
</style>