<TH nowrap>セル内での改行を禁止

テーブル(表)を作る際に利用する<TH>タグと<TD>タグにはnowrap属性を指定することができます。

一般的には、セルの表示幅はウィンドウの幅に合わせて自動的に調整されます。 そのためセル内のテキストが長い場合は、途中で改行されてしまう事があります。 こういった改行を禁止できるのが、nowrap属性です。

このnowrap属性を指定すると、セル内のテキストが長い場合でも自動的には折り返さず、1行で表示することができます。 ですがnowrap属性は、HTML4.01では非推奨とされており、HTML5では廃止されています。 セル内で改行無しの表示をしたい場合は、できるだけスタイルシートを利用するようにしましょう。

スタイルシートで同様の効果があるプロパティは「white-space」などがあります。

使用した時の例

<table border="2">
<caption>通常の状態</caption>
  <tr>
     <th>商品名</th>
     <th>コメント</th>
  </tr>
  <tr>
     <td>コシヒカリ</td>
     <td>新潟県産のコシヒカリです。コシヒカリは粘りが強いのが特徴で炊くとふっくらツヤツヤ、
     食べると...</td>
  </tr>
</table>

<table border="2">
<caption>nowrapで改行禁止の状態</caption>
  <tr>
     <th>商品名</th>
     <th>コメント</th>
  </tr>
  <tr>
     <td nowrap>コシヒカリ</td>
     <td nowrap>新潟県産のコシヒカリです。コシヒカリは粘りが強いのが特徴で炊くとふっくら
     ツヤツヤ、食べると...</td>
  </tr>
</table>

ブラウザ上の表示例

通常の状態
商品名 コメント
コシヒカリ 新潟県産のコシヒカリです。コシヒカリは粘りが強いのが特徴で炊くとふっくらツヤツヤ、食べると…
nowrapで改行禁止の状態
商品名 コメント
コシヒカリ 新潟県産のコシヒカリです。コシヒカリは粘りが強いのが特徴で炊くとふっくらツヤツヤ、食べると…

対応ブラウザなどのデータ

形式 <th nowrap>~</th>
<td nowrap>~</td>
分類 th,td:ブロックレベル要素
対応ブラウザ Internet Explorer2~

HTML5での状況と関連情報

HTML5では廃止。代わりにスタイルシートを利用しましょう。スタイルシートでの記述は<th style="white-space:nowrap;">というようになります。