[html] Tableタグのセルに対角線を引きたい時の方法
こんにちわ。
スマホOSなどのシステムアップデートは各種のバグが無いと分かった安定版になってから・・・と思っているけど、通知が来たらソッコーでアップデートしてしまう、下駄です。
人柱感がハンパないですが、新しい機能を一刻も早く使いたいという欲望には到底勝てません。
HTML5は表現が何でもできると思っていたけど、tableタグのセルで打ち消し対角線が引けないという事を、とあるサイトで質問されていて気が付かされました。
質問内容
https://teratail.com/questions/293877#reply-415492
「htmlのテーブルで対角線を引く」というタイトルで気になってみてみたトコロ、
なかなかの難易度と感じで、HTML機能だけでは、できないという事がわかり、
なんとも気持ち悪くなったので、回答してあげたら、ベスト回答をいただいてしまいました。
そして、他にも回答されていたんですが、それらのやり方も含めて、このブログにまとめておきたいと思います。
ようするに、リーグ戦の対戦表をtableタグで作った時に、タテヨコが自分に場合に使われないセルが発生するので、通常ではそこに対角線を書いて打ち消すんですが、tableタグでこれを表現したいというお悩みですね。
投稿者が自分である程度のコーディングをしてみたけど、まったく意図した結果になっていない様子も画像投稿されていて、わかりやすく解説されていますね。
回答その１「cssだけで解決」
お題のコードをそのままcssだけで解決できるスマートな方法です。
|
1 2 3 |
td.diagonal{ background-image: linear-gradient(to top right, transparent, transparent 49%, black 50%, black 50%, transparent 51%, transparent); } |
tdの対角線に対して、グラデーション機能を使って対角線を書く方法です。
%の値を変えると線を太くしたり補足したりできる上、他セルの形状に合わせて対角線を書いてくれます。
回答その2「svgを使って解決」
|
1 2 3 |
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <path d="M 0 0 L 0 0 L 40 40 z" fill="" stroke="#ccc" stroke-width="1" /> </svg> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
table{ border-collapse:collapse; } table th, table td{ border:1px solid #ccc; width:40px; height:40px; text-align:center; vertical-align:middle; padding:0; } .diagonal{ background-color:#eee; } .diagonal:after{ content:url(diagonal.svg); display:block; width:100%; height:100%; } |
画像(svg)で対角線をつける方法ですが、背景画像として登録してもいいし、imgタグとして登録もできるので、打ち消し線が背景で中に文字を入れた時に手前に来るようにすることもできます。
まとめ
cssだけでセットしてもいいし、擬似要素や、タグとしての使い方もできることがわかったので、これからは対角線に悩まなくて済みそうですね。
投稿した人も、きれいに解決できたようで、一安心です。
こうした事象を集めて、tableに関するライブラリを作っておくのもいいかもしれませんね。
他にもtableタグに求める事はあるのかな？？？
乞うご期待！