7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

tableの左上の斜め線を書く

Last updated at Posted at 2015-12-01

左上の斜め線?

表の上のタイトルと、左のタイトルそれぞれに対しての見出しのようなものをつけたいことはまぁなくはないと思います。

こういう感じの。
スクリーンショット 2015-12-02 1.16.01.png
http://www.aslive.biz/blog/747/ からキャプチャさせてもらいました)

やってみたcodepen

http://codepen.io/eedamame/pen/QjqPbG
以下、やった内容です。

svg

斜め線を引きたいセルにsvgを入れてそのセルの高さ/幅いっぱいに線を引くように調整します。
斜め線は背景画像的に、position: absolute;で入れる。

preserveAspectRatio

preserveAspectRatio=“none" で領域を埋めるような感じになるので、縦長/横長に変形してもよしなに調整してくれるみたい。
https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/preserveAspectRatio

svgタグの viewBox、path

viewBoxはviewportのようなもの。pathのdは線を引く座標だからここは合わせます。
サンプルでは、viewBoxは”0 0 100 100"、pathタグdは”M0,0 l100,100"としています。
100のところは、10000とかで揃えても斜めの線は問題なく引ける。
ただ、現実のpxサイズと違いすぎると、1pxの線のつもりで指定した
stroke-width="1” が細くなりすぎたり太くなったりするので、注意。
https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/viewBox

その他、table cell内で、高さが100%になるように調整

この辺
http://qiita.com/tomato360/items/28ca94ac42e5445e2d0a

はまったところ

IEで表示されない/高さが足りない

heightを明示してあげるか、別途セルにコンテンツが入っていないと斜め線が表示されなかった。
heightを明示すると、レスポンシブ的な対応にならないので、   を入れて1文字分の高さを確保すればその高さの分は表示される。

サンプルのように、斜め線が入るセルの高さが、列の中で一番高い場合は特に問題ないけど、そうでない場合は、paddingとかで微調整する必要があるかも...

その他

実際はウェブアプリ内での実装で、ある程度利用者が特定できたので
まぁこれくらいで良いかなという感じだったんですが、
こうすればセマンティクス的に良いとかあれば教えていただきたいです。

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?