2

私は、twitter-bootstrap-rails を使用してスタイル設定された非常に単純なアプリに取り組んでいます。モデルのインデックス ページの 1 つに、データを表示するテーブルがあり、とても見栄えがします。問題は、誰かがフィールドの 1 つに非常に長い文字列の途切れのないテキスト (たとえば 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;}

これまでのところ、それはうまくいきません。自分のコードをそんなに複製する必要があるのだろうかと思います。

4

1 に答える 1

6

結局自分で直しました。私がしたことは、幅の代わりに最大幅を使用することでした

th.column1 td.column1 { max-width:300px; word-wrap:break-word; }
于 2012-07-16T14:24:33.350 に答える