ホームページ作成 - セル内で改行されないようにする

1upホームページ作成ＴＯＰ > テーブル > セル内で改行されないようにする

セル内で改行されないようにする

セル内で改行されないようにする方法です。

sample

設定なしのセル

改行されない様に設定したセル

ＨＴＭＬ　nowrap

テーブルの幅不足や、ウィンドサイズ・内容量によって、セル内の文章が自動改行されてしまう場合があります。
これを強制的に改行されない様にするためには改行されたくない各セルの<th>や<td>に対してnowrapを指定します。

書き方は


<table border="1" width="300">
<tr>
<td>設定なしのセル</td>
<td nowrap>改行されない様に設定したセル</td>
</tr>
</table>

こうなります

ホームページ作成ＴＯＰ > テーブル > セル内で改行されないようにする > このページのＴＯＰ　▲

スタイルシート　white-space:nowrap

セル内の改行禁止をスタイルシートで行うには、各セルの<th>や<td>に対してwhite-space:nowrapを適用して調整します。

要素に直接書く

書き方は


<table border="1" width="300">
<tr>
<td>設定なしのセル</td>
<td style="white-space:nowrap">改行されない様に設定したセル</td>
</tr>
</table>

headに書く

書き方は


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

        .sample    { white-space:nowrap;}

 -->
 </style>
 </head>
 <body>

        <table border="1" width="300">
        <tr>
        <td>設定なしのセル</td>
        <td class="sample">改行されない様に設定したセル</td>
        </tr>
        </table>

 </body>
</html>

こうなります