左上の斜め線?
表の上のタイトルと、左のタイトルそれぞれに対しての見出しのようなものをつけたいことはまぁなくはないと思います。
こういう感じの。
(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とかで微調整する必要があるかも...
その他
実際はウェブアプリ内での実装で、ある程度利用者が特定できたので
まぁこれくらいで良いかなという感じだったんですが、
こうすればセマンティクス的に良いとかあれば教えていただきたいです。