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

我最終自己修復了它。 我所做的是使用最大寬度而不是寬度

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