(96) 表のセルの中で改行させたくない。

投稿者: | 2021年1月14日

1. やりたいこと

tableの thや tdの中に書いたテキストが自動的に改行表示されることがしばしばある。

Windowのサイズ変更などで表示幅が小さくなった場合によく起こる。
当然と言えば当然なのだが…

でも…
勝手に改行されたくないときもある!

2. やってみる

簡単だ。
CSSで white-space: nowrap; と書けばよい。

SASSで書くなら以下のようになる。

table{
  th,td{
    white-space: nowrap;
  }
}

以下のサンプルコードを書き、表示結果を見てみる。
type1 : 勝手に改行あり。
type2 : 勝手に改行なし。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00096</title>
<style>
div{
  width: 100px;
  border:2px solid #f00;
  margin: 10px;
}
table td{
  border: 1px solid #000;
}
table.type1 td{
  white-space: normal;
}
table.type2 td{
  white-space: nowrap;
}
</style>
</head>
<body>

<div>
TYPE#1
<table class="type1">
  <tr>
    <td>あいうえお</td><td>かきくけこ</td><td>さしすせそ</td>
  </tr>
</table>
</div>

<div>
TYPE#2
<table class="type2">
  <tr>
    <td>あいうえお</td><td>かきくけこ</td><td>さしすせそ</td>
  </tr>
</table>
</div>

</body>
</html>

以下のように表示された。
type2(改行なし)の場合、tableの親要素である divの幅をはみ出してでも、改行無しで表示される。

http://www.dogrow.net/hp/sample/00096/

3. 所感

・これを知らなかった頃は、セル内に表示する文字列の幅を mb_strlen(“あいうえおかきくけこ”) などで知り、style=”width:10rem” などと書いていた。今後はそんなことをしなくてよい。やった!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)