読者です 読者をやめる 読者になる 読者になる

鍋の底

雑多な記録

CSSでの表見出しの均等割付 (css3版)

NSEG Advent Calendar 2015 - Adventarにエントリを書きたいと思っていたら、ネタが降ってきたので急いで書きました。

というわけで12/23のエントリになります。

さて、ワープロなどにある均等割付を、Web でも表現したいという需要があります。

f:id:nabetaro:20151223212054p:plain

このとき css では text-align に justify を指定すると思います。 この文章のように複数行ある場合には、効いているように見えますが、 table の見出しセルを均等割付をしたい場合には、うまくいきません。

f:id:nabetaro:20151223214321p:plain

Webでしらべても「text-align justify 効かない」がサジェストに現れるくらいには、効かないもののようです。

なぜこうなるのか、文章に対する均等割付から考えてみましょう。 均等割付の際には、段落の最後で、均等に割り付けてしまうと、むしろおかしくなります。 そのためか、段落の最後では均等割付となりません。

f:id:nabetaro:20151223213656p:plain

tableの見出しセル(ここではth)が均等割付にならないのは、段落の最後と認識されてしまっているからだと思われます。

では、方法はないのでしょうか。

CSS3 では、text-align-last https://drafts.csswg.org/css-text-3/#propdef-text-align-last というプロパティが追加されており、これを利用すると、段落の最後に対する指定ができます。ブラウザが対応していれば、均等割付できそうです。

簡単に確認したところ、Firefoxではベンダープレフィックスが必要、Chromeではそのまま指定できそうです。 その他のブラウザは、後日時間のあるときに。

td {
  width: 200px;
}

th {
  width: 100px;
  -moz-text-align-last: justify;
  text-align-last: justify;
}

ひとまず、このスタイルで、以下のような表示にできました。

f:id:nabetaro:20151223220044p:plain