title: twitter-bootstrap-rails maximum column width
body: <p>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.</p>
  
  <p>What I have tried to do so far was for each <code>&lt;th&gt;</code> I have added a class and tried to use CSS to control the width.  Here is an example</p>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="column1"&gt; etc
        &lt;th class="column2"&gt; etc
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="column1"&gt; etc
        &lt;td class="column2" etc
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And then I was using this in my stylesheet</p>
  
  <pre><code>th.column1 { width: 300px;
    word-wrap:break-word;}
  td.column1 { width: 300px;
    word-wrap:break-word;}
  </code></pre>
  
  <p>So far that isn't working for me, and I wonder if I need to be duplicating my code so much.  </p>