twitter引导程序跟踪最大列宽

Question

我正在开发一个非常简单的应用程序，该应用程序使用twitter引导轨进行样式设计。在我的模型索引页面中，有一个显示数据的表，它看起来非常棒。问题是，如果有人在其中一个字段中输入一个非常长的未中断文本字符串（例如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

我最终自己修复了它。我所做的是使用最大宽度而不是宽度

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