テーブル（表）の空セル(TH,TD)に斜線をCSSで引く

CSSのみでExcelのようにセルに斜線を引くことが出来ます。

当ページではCSSで「SVG」を利用することで斜線を引いています。「linear-gradient」を利用する方法もありますが、斜線の太さ指定や滑らかさに関しては「SVG」の方が自由に設定可能となっています。

斜線を背景の100%指定を利用することで、セルの幅が変わっても滑らかな斜線を引くことができます。左上→右下、左上→右下の両方の斜線に対応しています。また、斜線の太さや色なども自由に変更することができます。

セルに値が入っていない場合に、斜線と背景が設定されるサンプルです。
罫線の種類や色、背景を自由に変更しながらCSSを生成することができ、CSSをそのままコピペで利用することができます。
「empty」を使用して、空セルを対象として斜線を引いていますが、値のあるセルなどにも斜線を引くことはできます。後記のサンプルをご確認ください。

<table class="tableArea">
  <tr><th></th><th>列1</th><th>列2</th><th>列3</th><th>列4</th></tr>
  <tr><th>行1</th><td>aaaa</td><td>bbbbbbbbbb</td><td>ccc</td><td>d</td></tr>
  <tr><th>行2</th><td></td><td>e</td><td>fffffffffffff</td><td></td></tr>
  <tr><th>行3</th><td>g</td><td></td><td></td><td>h</td></tr>
  <tr><th>行4</th><td>i</td><td>j</td><td>k</td><td></td></tr>
</table>

<style type="text/css">
 /* --- テーブル全体のスタイル指定 --------------- */
#tableArea {
  margin         : auto;             /* 自動位置   */
  border-collapse: collapse;         /* 境界線結合 */
  border-spacing : 0;                /* 罫線間余白 */
  font-size      : 9pt;              /* 文字サイズ */
  background     : #fff;             /* テーブル全体の背景色 */
}
 /* --- ヘッダーのスタイル指定 ------------------- */
#tableArea th {
  text-align    : center;            /* 文字位置  */
  padding       : 5px;               /* 余白      */
  border        : 1px #666 solid;    /* 罫線      */
  background    : #99ccff;           /* 背景色    */
}
 /* --- 明細のスタイル指定 ----------------------- */
#tableArea td {
  padding       : 5px;               /* 余白      */
  border        : 1px #666 solid;    /* 罫線      */
}
 /* --- 空のTD「セル」をrelativeに設定 ------------ */
#tableArea td:empty { {
  position      : relative;         /* 斜線の親     */
}
 /* --- 空のTD「セル」にBOXを作り斜線を埋め込む --- */
#tableArea td:empty:after {
  display       : block;            /* ブロック要素 */
  position      : absolute;         /* 親からの相対 */
  content       : "";               /* ダミー文字   */
  border        : 0px;              /* 枠線なし     */
  top           : 0;                /* 親からの位置 */
  left          : 0;                /* 親からの位置 */
  bottom        : 0;                /* 親からの位置 */
  right         : 0;                /* 親からの位置 */
  background-color: #dddddd;        /* 背景色       */
    /* ▼ 斜線はSVG画像を背景として設定 */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoxMDAlO2hlaWdodDoxMDAlOyI+PGxpbmUgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSIgc3R5bGU9InN0cm9rZTogIzMzMzMzMztzdHJva2Utd2lkdGg6IDE7Ij48L2xpbmU+PC9zdmc+');
}
</style>

空白以外のセルに斜線を引く場合

空セル以外に斜線を引く場合は、斜線を引くセルにclass指定を行います。

<table class="sample1">
  <tr><td>aaaaa</td><td>bbbbbbbb</td><td>ccccc</td></tr>
  <tr><td>ddddd</td><td class="shasen">eeeeeeee</td><td>fffff</td></tr>
  <tr><td>ggggg</td><td>hhhhhhhh</td><td>iiiii</td></tr>
</table>

<style type="text/css">
 /* --- テーブル全体のスタイル指定 --------------- */
.sample1 {
  margin         : auto;             /* 自動位置   */
  border-collapse: collapse;         /* 境界線結合 */
  border-spacing : 0;                /* 罫線間余白 */
  font-size      : 9pt;              /* 文字サイズ */
  background     : #fff;             /* テーブル全体の背景色 */
}
 /* --- セルのスタイル指定 ----------------------- */
.sample1 td {
  text-align    : center;            /* 文字位置   */
  padding       : 5px;               /* 余白       */
  border        : 1px #666 solid;    /* 罫線       */
}
 /* ---空のセル(TD)の背景色と斜線を設定 ---------- */
.sample1 .shasen {
  background-color: #dddddd;         /* 背景色     */
  /* ▼ 斜線はSVGで背景画像として設定 */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoxMDAlO2hlaWdodDoxMDAlOyI+PGxpbmUgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSIgc3R5bGU9InN0cm9rZTogIzMzMzMzMztzdHJva2Utd2lkdGg6IDE7Ij48L2xpbmU+PC9zdmc+');
}
</style>

テーブル全体に斜線を引く場合

テーブル全体に斜線を引く場合は、テーブルの背景に斜線のSVG画像を指定します。

<table class="sample2">
  <tr><td>aaaaa</td><td>bbbbbbbb</td><td>ccccc</td></tr>
  <tr><td>ddddd</td><td>eeeeeeee</td><td>fffff</td></tr>
  <tr><td>ggggg</td><td>hhhhhhhh</td><td>iiiii</td></tr>
</table>

<style type="text/css">
 /* --- テーブル全体のスタイル指定 --------------- */
.sample2 {
  margin         : auto;             /* 自動位置   */
  border-collapse: collapse;         /* 境界線結合 */
  border-spacing : 0;                /* 罫線間余白 */
  font-size      : 9pt;              /* 文字サイズ */
  background     : #fff;             /* テーブル全体の背景色 */
  /* ▼ 斜線はSVGで背景画像として設定 */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoxMDAlO2hlaWdodDoxMDAlOyI+PGxpbmUgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSIgc3R5bGU9InN0cm9rZTogIzMzMzMzMztzdHJva2Utd2lkdGg6IDE7Ij48L2xpbmU+PGxpbmUgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSIgc3R5bGU9InN0cm9rZTogIzMzMzMzMztzdHJva2Utd2lkdGg6IDE7Ij48L2xpbmU+PC9zdmc+');
}
 /* --- セルのスタイル指定 ----------------------- */
.sample2 td {
  text-align    : center;            /* 文字位置   */
  padding       : 5px;               /* 余白       */
  border        : 1px #666 solid;    /* 罫線       */
}
</style>