Table wider than Bootstrap column container

Question

Can someone explain to me why is this happening? I've wrapped my content inside Bootstrap responsive divs and my table which is inside that div has bigger width than 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 if I have one really big content with a lot of characters, table becomes much wider than it's container <div class="col-md-4">. How to accomplish that it's content wraps to another row and not break a layout? Thank you for your help!

Answer 1

Try adding word-wrap and word-break

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

Here's your updated Bootply