부트 스트랩 열 컨테이너보다 넓은 테이블

Question

누군가가 왜 이런 일이 일어 났는지 설명 할 수 있습니까? 부트 스트랩 응답 divs 내 div 내 안쪽에있는 내 테이블 내 콘텐츠 래핑했습니다 div보다 큰 컨테이너가 있습니다.

<div class="row"> 
    <div class="col-md-4"> 
    <table class="table"> 
     <tbody> 
     <% @user.each do |user| %> 
      <tr> 
      <td><%= user.content %></td> 
      </tr> 
     <% end %> 
     </tbody> 
    </table> 
    </div> 
</div> 

문제는 내가 문자를 많이 하나 개 정말 큰 내용이있는 경우, 테이블은 컨테이너 <div class="col-md-4">의 것보다 훨씬 더 넓은되고있다. 그것이 내용을 다른 행에 랩핑하고 레이아웃을 깨지 않게하는 방법은 무엇입니까? 도와 줘서 고마워! 보십시오 여기 word-wrap 및 word-break

td { 
    word-wrap:break-word; 
    word-break:break-all; 
} 

를 추가하여 작동합니다

Answer 1

:

table { 
    table-layout:fixed; 
    width:100%; 
} 

이전이 HTMLs의 모든 table 태그에 적용, 그래서 정의하여 자신의 편의 class.

Answer 2

다음 Bootply를 업데이트됩니다