Question

I am working on a really simple app that is styled using twitter-bootstrap-rails. One my model index page there is a table that displays the data and it looks really great. The problem is that if someone enters a really long string of unbroken text (like a URL for example) into one of the fields, the width of that column with stretch and squish all the other columns. I would like some way to enforce the width of the column and tell the browser to break up really long words.

What I have tried to do so far was for each <th> I have added a class and tried to use CSS to control the width. Here is an example

<table>
  <thead>
    <tr>
      <th class="column1"> etc
      <th class="column2"> etc
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="column1"> etc
      <td class="column2" etc
    </tr>
  </tbody>
</table>

And then I was using this in my stylesheet

th.column1 { width: 300px;
  word-wrap:break-word;}
td.column1 { width: 300px;
  word-wrap:break-word;}

So far that isn’t working for me, and I wonder if I need to be duplicating my code so much.

Answer 1

I ended up fixing it on my own. What I did was use max-width instead of width

th.column1 td.column1 { max-width:300px; word-wrap:break-word; }