2
4

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 3 years have passed since last update.

表(table)の空のセルにCSSのみで斜線を引く 

Last updated at Posted at 2020-10-09

##空のセルに対して、斜線を引く
例えば下記のような表を作った。
営業日:月、火
お休み:水曜日
っていう感じで、
水曜日のセルに斜線を入れたい時。
(初心者のため表のイメージの貼り付けができなくてごめんなさいね)

一番下の水曜日のセルには何も書かない。
空にしておく。

index.html
<table border="1">
            <tr>
              <th>診療時間</th>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <th>9:00~15:00</th>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>

CSSで空のセルに対して。

style.css
/* 空のセルに斜線を引く 透明ー黒黒ー透明 */
table td:empty {
  background-image: linear-gradient(to top left,
  transparent, transparent 49%,
     black 49%,
     black 51%,   /* 線の太さ */
    transparent 51%, transparent);
}

解説

table td:empty:空のセルに対して。
・グラデーションlinear-gradientを利用します。
グラデーションの仕組みは、なんとなくの理解だけど、
「透明〜黒〜黒〜透明の順番でグラデーションしろ。」ってイメージでいいかと。
→→ちょうど中間で黒い線が引かれる。=斜線 
線の太さは%を変更すれば良い。(ちなみにこれは最小)
47%〜53%とかいい感じじゃないかな。

★この時に、to top left,て指定しているのがポイント。
「(右下から)左上に向かってグラデーション」となるので、右上りの斜線になる。

逆に右下がりの斜線ならrightに変更すれば良い。

他のやり方だと45度傾けたりする方法もあるけど、正方形のセルに対してじゃないとうまくいかないよう。。これならどんな形でもバッチリ斜めの線になる。はず。

参考リンク

CSSで斜線を引く方法

2
4
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
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?