title: Table wider than Bootstrap column container
body: <p>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.</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-4"&gt;
      &lt;table class="table"&gt;
        &lt;tbody&gt;
          &lt;% @user.each do |user| %&gt;
            &lt;tr&gt;
              &lt;td&gt;&lt;%= user.content %&gt;&lt;/td&gt;
            &lt;/tr&gt;
          &lt;% end %&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is if I have one really big content with a lot of characters, table becomes much wider than it's container <code>&lt;div class="col-md-4"&gt;</code>. How to accomplish that it's content wraps to another row and not break a layout? Thank you for your help!</p>