表比Bootstrap列容器宽

Question

有人可以向我解释为什么会这样吗？我把我的内容包装在Bootstrap响应div中，而我的表格里面的div宽度大于容器。

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

问题是如果我有一个非常大的内容有很多字符，表变得比它的容器<div class="col-md-4">宽得多。如何实现它的内容包装到另一行而不是破坏布局？谢谢你的帮助！

Answer 1

尝试添加word-wrap和word-break

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

这是您更新的Bootply

Answer 2

以下内容应该有效：

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

之前适用于HTML中的所有table代码，因此请定义自己的便利class。