571 views
この記事は最終更新から 955日 が経過しています。
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” などと書いていた。今後はそんなことをしなくてよい。やった！
おまけ
通常に戻したければ以下のようにする。
table{
th,td{
white-space: normal;
}
}
JavaScriptで動的に指定変更したい場合、
$(‘xxxxx’).css(‘white-space’,’normal’)
でもよいし
$(‘xxxxx’).css(‘white-space’,”)
でもよい。