tableセルに斜線を入れてみる

今回は、tableのセルに斜線を入れる方法をご紹介します。
次のtableのような仕上がりになります。

このtableを作るためのHTMLとCSSはこちらです。
では、簡単に解説していきます。

<table class="table-defo table-border-all">
  <tbody>
    <tr>
      <th>こちらがth</th>
      <td>こちらがtd</td>
      <td class="table-defo-diagonal-line"></td>
    </tr>
    <tr>
      <th>こちらがth2</th>
      <td>こちらがtd2</td>
      <td>こちらがtd2-2</td>
    </tr>
    <tr>
      <th>こちらがth3</th>
      <td>こちらがtd3</td>
      <td>こちらがtd3-2</td>
    </tr>
  </tbody>
</table>

<table class="table-defo table-border-all">
  <tbody>
    <tr>
      <th>こちらがth</th>
      <td>こちらがtd</td>
      <td class="table-defo-diagonal-line"></td>
    </tr>
    <tr>
      <th>こちらがth2</th>
      <td>こちらがtd2</td>
      <td>こちらがtd2-2</td>
    </tr>
    <tr>
      <th>こちらがth3</th>
      <td>こちらがtd3</td>
      <td>こちらがtd3-2</td>
    </tr>
  </tbody>
</table>

.table-defo-diagonal-line {
  background-image: linear-gradient(to left top, transparent calc(50% - 0.5px), #777 50%, #777 calc(50% + 0.5px), transparent calc(50% + 1px)) !important;
}

.table-defo-diagonal-line {
  background-image: linear-gradient(to left top, transparent calc(50% - 0.5px), #777 50%, #777 calc(50% + 0.5px), transparent calc(50% + 1px)) !important;
}

HTMLについて

斜線をつけたいセルに「.table-defo-diagonal-line」というクラスを設定しています。

クラスは使わずに「:empty」という擬似要素で斜線をつける設定でも作れます。
ですが、空白のセルだけどここは斜線を引きたくないな～というときに不便だったりするので、今回はクラスで設定しました。

<table class="table-defo table-border-all">
  <tbody>
    <tr>
      <th>こちらがth</th>
      <td>こちらがtd</td>
      <td class="table-defo-diagonal-line"></td><!--斜線にする-->
    </tr>
    <tr>
      <th>こちらがth2</th>
      <td>こちらがtd2</td>
      <td>こちらがtd2-2</td>
    </tr>
    <tr>
      <th>こちらがth3</th>
      <td>こちらがtd3</td>
      <td>こちらがtd3-2</td>
    </tr>
  </tbody>
</table>

<table class="table-defo table-border-all">
  <tbody>
    <tr>
      <th>こちらがth</th>
      <td>こちらがtd</td>
      <td class="table-defo-diagonal-line"></td><!--斜線にする-->
    </tr>
    <tr>
      <th>こちらがth2</th>
      <td>こちらがtd2</td>
      <td>こちらがtd2-2</td>
    </tr>
    <tr>
      <th>こちらがth3</th>
      <td>こちらがtd3</td>
      <td>こちらがtd3-2</td>
    </tr>
  </tbody>
</table>

tableの斜線用CSS

「background-image」の「linear-gradient」で斜線を作成しています。
「linear-gradient」の（）の中で、どのような設定をしているか簡単に説明していきます。

.table-defo-diagonal-line {
  background-image: linear-gradient(to left top, transparent calc(50% - 0.5px), #777 50%, #777 calc(50% + 0.5px), transparent calc(50% + 1px)) !important;
}

.table-defo-diagonal-line {
  background-image: linear-gradient(to left top, transparent calc(50% - 0.5px), #777 50%, #777 calc(50% + 0.5px), transparent calc(50% + 1px)) !important;
}

線を引く方向の設定

（）内の「to left top」は、グラデーションが進む方向を指定しています。
今回は「左上に向かって」進むように設定しました。
始点が右下、左上に向かってグラデーションになる状態です。
実際にグラデーションにしてみると、こんな感じになります。↓

光の三原色～と思って色を設定したけど、某掃除機みたいな色になっちゃったな。
赤：始点右下、青：中間、緑：終点左上…というグラデーションです。
この「青：中間」が、左下から右上に向かって斜めになっています。
これが、今回作成する線を引く方向になっています。

線の色と太さの設定

次に、線の色と太さを設定します。

• transparent calc(50% – 0.5px)
  始点（右下）から中間（50%）のわずか手前までを「透明」にします。
• #777 50%
  中間（50%）の地点で色をグレー（#777）にします。
  これがなくても斜線は引けるのですが、なんか色薄くね？と思ったので色を濃くするために入れています。
• #777 calc(50% + 0.5px)
  中央から0.5px進んだ地点までグレーを維持します。
  これにより、中央付近で合計1px分（-0.5pxから+0.5pxまで）のグレーの厚みが生まれます。
• transparent calc(50% + 1px)
  そこから先を再び「透明」にします。

最後の「!important」は、あってもなくてもどちらでもいいです。
他のbackgroundの指定に負けないようにつけていますが、不要であれば消してください。

斜線を引く方向を変える場合

次のCSSのように、「left top」を「right top」に変更してください。

.table-defo-diagonal-line-reverse {
  background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #777 50%, #777 calc(50% + 0.5px), transparent calc(50% + 1px)) !important;
}

.table-defo-diagonal-line-reverse {
  background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #777 50%, #777 calc(50% + 0.5px), transparent calc(50% + 1px)) !important;
}

このように、左上から右下への斜線に変わります。

まとめ

正直あまりつかうことはないと思うんですけどね。私も実務で使ったのは一回きりでしたし。
当時どうやって斜線入れるんだ～？？と困ったので、備忘録として残しておこうと思います。

今回はクラスで斜線のセルを指定しましたが、空白のセルは全て斜線にしたい場合は「:empty」を使ってみてください。
「:empty」を使う場合、スペースで空白が入力されていないか注意が必要です。

他にもtable関連の記事を作っていますので、よろしければご参考にどうぞ。