테이블 너비가 지정된 픽셀보다 길습니까?

Question

여기 내 HTML입니다. 그러나 마지막으로 길을 측정 할 때 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;을 표 셀의 스타일 속성에 추가하여 부분적으로 해결할 수 있습니다. 이로 인해 표 셀의 한계에 도달하면 단어가 깨집니다. IE 및 CSS3 지원 브라우저에서 완전히 지원됩니다.