CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstrap
Bosquets
Bosquets

Reputation: 227

Table wider than Bootstrap column container

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!

Upvotes: 17

Views: 13907

Answers (2)

JeanValjean
JeanValjean

Reputation: 17713

The following should work:

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

The previous applies to all table tags in your HTMLs, so define your own convenience class.

Upvotes: 10

skube
skube

Reputation: 6175

Try adding word-wrap and word-break

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

Here's your updated Bootply

Upvotes: 23

Related Questions