web-dev-qa-db-ja.com

テーブルセル（単一のセルではない）の列で改行を防ぐ方法

テーブルの列（単一のセルではない）で自動改行を防ぐにはどうすればよいですか？

htmlcsslayout
149
Steven

CSSスタイルの空白を使用できます。

white-space: nowrap;
228
David M

完成のために：

#table_id td:nth-child(2)  {white-space: nowrap;}

the table_idテーブルの2列にスタイルを適用するために使用されます。

これはすべての主要なブラウザでサポートされており、IEはIE9以降でこれをサポートし始めました。

35
estani

Nowrapスタイルを使用します。

<td style="white-space:nowrap;">...</td>

CSSです！

18
Derek Illchuk

これを行うにはいくつかの方法があります。どれも簡単で明白な方法ではありません。

White_space：nowrapを<col>に適用しても機能しません。 <col>要素で機能するCSSプロパティは、背景色、幅、境界線、可視性の4つのみです。 IE7以前はすべてのプロパティをサポートしていましたが、それは奇妙なテーブルモデルを使用していたためです。 IE8は現在、他のすべてのユーザーと一致します。

それで、どうやってこれを解決しますか？

IE（IE8を含む）を無視できる場合は、:nth-child()擬似クラスを使用して、各行から特定の<td>sを選択できます。 td:nth-child(2) { white-space:nowrap; }を使用します。 （これはこの例では機能しますが、関係する行スパンまたは列スパンがある場合は破損します。）

IEをサポートする必要がある場合、長い道のりを回って、影響を与えるすべての<td>にクラスを適用する必要があります。それはひどいですが、彼らは休憩です。

長い目で見れば、CSSのこの欠如を修正する提案があり、列内のすべてのセルにより簡単にスタイルを適用できるようになります。 td:nth-col(2) { white-space:nowrap; }のようなことをすることができ、それはあなたが望むことをするでしょう。

15
Xanthir
<td style="white-space: nowrap">

私が信じるnowrap属性は非推奨です。上記が好ましい方法です。

12
Dan Breen

追加するだけ

style="white-space:nowrap;"

例：

<table class="blueTable" style="white-space:nowrap;">
   <tr>
      <td>My name is good</td>
    </tr>
 </table>
9
Harun Or Rashid

通常のスペースの代わりに、テキストに改行しないスペースを入れてください。 Ubuntuでは（Compose Key）-space-spaceでこれを行います。

5
Roger Keays

テーブル全体に適用するには、tableタグ内に配置できます。

<table style="white-space:nowrap;">

4
OlgaMaciaszek