twitter-bootstrap-rails最大列宽

Question

我正在开发一个非常简单的应用程序,使用twitter-bootstrap-rails进行样式设置.我的模型索引页面有一个显示数据的表,它看起来非常棒.问题在于,如果有人将一段非常长的完整文本(例如URL)输入到其中一个字段中,则该列的宽度会拉伸并挤压所有其他列.我想要一些方法来强制列的宽度,并告诉浏览器分解真正长的单词.

我到目前为止尝试做的是每个<th>我添加了一个类并尝试使用CSS来控制宽度.这是一个例子

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

然后我在我的样式表中使用它

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

到目前为止,这对我不起作用,我想知道是否需要复制我的代码.

Answer 1

我最终自己修理了它.我所做的是使用max-width而不是width

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