テーブルの幅が指定されたピクセルより長くなっていますか？

Question

ここは私のHTMLですが、私は最後のtdの道のりを300px以上測定します。

<table width='400'> 
    <tr> 
     <th colspan='2' style='text-align:left;'><br /><br />Beginner<br /><br /></th> 
    </tr> 
    <tr> 
     <th>Title</th> 
     <th>another Deal</th> 

     <th>Users</th> 

    </tr> 
    <tr> 
    <td>SomeDat</td> 
    <td>0/38</td> 
    <td style="width:300px"> 
     <span class="red"></span> <span class="yellow"></span></td> 

    </tr> 
    <tr> 
    <td>Git</td> 
    <td>28/38</td> 
    <td style="width:300px"> 
     <span class="red">something,something,something,something,something,something,something,something,something,something,something, ,something,something,something,something,something</span> <span class="yellow">test</span></td> 
    </tr> 
</table> 

Answer 1

表は、その最も広い要素に必要な幅に拡大されます。 「何か、何か、...」は非常に長く解けない言葉であり、あなたが望むより広いテーブルを余儀なくされています。

スペースを追加すると、テキストが折り返されます。長い破られない単語を切り取る場合は、スタイルでoverflow:hiddenを試してください。

Answer 2

Nedが述べたように、長い単語はセルを拡大させています。

word-wrap: break-word;を表のセルのstyle属性に追加することで、これを部分的に解決できます。これにより、表のセルの限界に達すると単語が壊れます。 IEおよびCSS3をサポートするすべてのブラウザで完全にサポートされています。