Tabelle breiter als Bootstrap-Säulencontainer

Question

Kann mir jemand erklären, warum das passiert? Ich habe meine Inhalte in bootstrap-responsive divs eingepackt und meine Tabelle innerhalb dieses div hat eine größere Breite als der Container.

<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> 

Das Problem ist, wenn ich einen wirklich großen Inhalt mit vielen Zeichen, Tabelle wird deutlich breiter als es ist Container <div class="col-md-4">. Wie wird erreicht, dass der Inhalt in eine andere Zeile umgebrochen wird und kein Layout unterbrochen wird? Danke für Ihre Hilfe!

Answer 1

Versuchen Hinzufügen word-wrap und word-break

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

Ihre Bootply Ist hier aktualisiert

Answer 2

Folgende Arbeiten sollten:

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

Die bisherige allen table Tags in Ihrem HTMLs gilt, so definieren Sie Ihre eigene Bequemlichkeit class.