ubichupas.net

スタイルシートを使って表の見出しを手動で折り返す

表の見出しが長いときウィンドウサイズを小さくしていくとテキストの折り返しが起る。 それが末尾の1文字とか2文字だけだと非常にダサい。 これをどうにかしようとしてCSS3を調べると word-breakやoverflow-wrapなんてプロパティが出てくるけど、 日本語ではほぼ役に立たない。 特に表の見出しには熟語が使われるのでどうしても漢字１文字毎に折り返されてしまう。

日本語を狙った位置で折り返そうと思ったら日本人の手で指定してやるしかない。 そこでthタグの折り返したい位置にspanタグを埋め込んでおき、 ウィンドウサイズが小さくなったらdisplay: block;を発動させる手を考えた。 これはJavaScriptでwindow.onresize()を監視しなくても、 CSSのMedia Queriesでトリガーとなるサイズを @media (max-width: 640px) {}と指定しておけば発動する。

今回の表はmin-width: 4em;にパディングも加えて7列なので 18px * 4.5 * 7 = 567pxとなる。 スマホ向けには <meta name="viewport" content="width=640">を宣言したので スマホを縦にしても横にしても表示幅は640px固定で、表示倍率だけが変わって１画面に納まる。

ダサい原因にはもう１つ、見出し行の高さが倍になってデザインが崩れてしまうことにあると思う。 これはthタグのheightをline-heightの2～3倍に設定しておけば回避できる。

table_break.html 
<!DOCTYPE html>
<html lang="ja">
<head>
<title>word-break in table</title>
<style>
html {
    font-size: 18px;
}

h1 {
    font-size: 2rem;
    line-height: 2.2rem;
}

table {
    font-size: 1rem;
    margin: 1rem auto;
    word-break: normal;
}
table th {
    font-size: 0.5em;
    line-height: 1.2em;
    height: 4em;
}
table td {
    font-size: 0.8em;
    min-width: 4em;
    padding: 0.25em;
    text-align: right;
}

table, th, td {
    border: solid 1px silver;
    border-collapse: collapse;
}
table th {
    background-color: cornsilk;
}

@media (max-width: 640px) {
    .word-break span { display: block; }
}
</style>
<meta name="viewport" content="width=640">
</head>
<body>

<h1 class="word-break">自動で折り返される前に<span>手動で折り返す。</span></h1>

<table class="word-break">
  <tr>
    <th>売上高</th>
    <th>営業利益</th>
    <th>経営利益</th>
    <th>親会社に帰属する<span>当期純利益</span></th>
    <th>減価償却費</th>
    <th>研究開発費</th>
    <th>為替レート<span>(円/US$)</span></th>
  </tr>
  <tr>
    <td>1,033</td> <td>-98</td> <td>-127</td> <td>-18</td> <td>121</td> <td>41</td> <td>109.1</td>
  </tr>
  <tr>
    <td>1,519</td> <td>-229</td> <td>-351</td> <td>-1,466</td> <td>214</td> <td>45</td> <td>108.2</td>
  </tr>
</table>

<div style="font-size: 2vw;">
壱弐参肆伍陸漆捌玖拾零零零零零零零零零弐零零零零零零零零零参零零零零零零零零零肆零零零零零零零零零伍零零零零零零零零零陸零零零零零零零零零漆零零零零零零零零零捌零零零零零零零零零玖零零零零零零零零零佰
</div>

</body>
</html>

HTML5には<wbr>という<br>のように終了タグがいらないタイプのタグが追加されており、 これを挿入しておけばスタイルシートさえ使わずに今回と同じような折り返しができる。 ただしFriefox 62.0.3の場合は<th>為替レート<wbr>(円/US$)</th>と書いても 先に「円」と「/」の間で折り返しが起ってしまった。残念。

0 件のコメント:

コメントを投稿