6

http://jsfiddle.net/a2kvU/

<table class="table table-bordered table-condensed">
    <tbody>
        <tr><td class="nowrap">abc def ghi jkl<span class="label label-info pull-right">123</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
        <tr><td class="nowrap">abc def ghi<span class="label label-info pull-right">456</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
        <tr><td class="nowrap">abc def<span class="label label-info pull-right">789</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
        <tr><td class="nowrap">abc<span class="label label-info pull-right">1000</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
    </tbody>
</table>

.nowrap {
    white-space: nowrap;
}

ほとんどの画面サイズでは、これは次のようになります

希望

画面サイズが小さい場合 (実際のテキストが十分に大きい場合)、これは次のようになります。

ブーラッピング

左の列の折り返しに注意してください。左の列を折り返さないようにするにはどうすればよいですか?

4

2 に答える 2

4

次のように、クラス nowrap で min-width プロパティを定義する必要があります。

td.nowrap {
  min-width: 129px;
}

フィドルの例では、129px の値が計算されました。

テーブル内のコンテンツは変更される可能性があるため、これを行う最善の方法 (おそらく「最もクリーンな」方法ではないかもしれません) は、ページの読み込み時に必要な td の最小幅を計算し、次に最小幅の値を設定することです。

あなたの例では、Bootstrap は最初の幅を 300px にするため、計算は非常に複雑です。今日の後半に jQuery の例を用意しようと思います。

于 2013-09-10T10:29:49.347 に答える
1

スパン テキストを 2 番目の列に移動してみてください (1 つの列として表示されるようにスタイルを調整し、ヘッダーが両方の列にまたがるようにします)。次に、最初の列が左に引っ張られ、2 番目の列が右に引っ張られます。両方が text-nowrap クラス (または同等のもの) を持っている限り、折り返しは発生しません。

<td class="nowrap norightborder">abc def ghi jkl</td><td class="nowrap noleftborder"><span class="label label-info pull-right">123</span></td>
于 2015-11-06T18:13:52.947 に答える