Table larger than bootstrap column container

Question

Can someone explain to me why this is happening? I wrapped the contents inside the bootstrap boot divs and my table, which is inside this div, is wider than the 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> 

The problem is that if I have very large content with a lot of characters, the table becomes much wider than the container <div class="col-md-4"> . How to ensure that content is wrapped in a different line, rather than breaking the layout? Thanks for the help!

Answer 1

Try adding word-wrap and word-break

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

Here is your updated bootply

Answer 2

The following should work:

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

The previous applies to all table tags in your HTML files, so determine your convenience class .