Tabella più ampia del contenitore colonna Bootstrap

Question

Qualcuno può spiegarmi perché succede? Ho avvolto il mio contenuto all'interno delle divs responsive Bootstrap e il mio tavolo che è all'interno di quel div ha una larghezza maggiore del contenitore.

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

Il problema è che se ho una davvero grande contenuto con un sacco di personaggi, tavolo diventa molto più ampia di quanto non sia il contenitore <div class="col-md-4">. Come realizzare che il contenuto si avvolge su un'altra riga e non rompa un layout? Grazie per l'aiuto!

Answer 1

Prova ad aggiungere word-wrap e word-break

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

Ecco la tua aggiornato Bootply

Answer 2

Il seguente dovrebbe funzionare:

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

Il precedente si applica a tutti i table tag nel HTMLs, in modo da definire il propria convenienza class.