td に斜線を引きたい

td に斜線を引きたい

引きたいのです。
検索したら方法がいくつか出てきたのだけど、どれも微妙に要件を満たさず…

■画像でなんとかする
⇒ 斜線が描かれた画像を用意して、それをtdの背景にする、という理解で良いの？
これだとtdのサイズに合わせた画像を用意しないと、tdが大きい場合等に画像が拡大されてぼやけてしまいました。

■linear-gradient で斜線をひく
⇒ これもtdの大きさによって線の太さが変わってしまうのが気になりました。(サンプル test-A)

■javascriptで線を引く
⇒ この方法もあるようでしたが、リサイズのタイミングで再度処理を呼ばなければいけないとかちょっと嫌だったので ひとまず無しの方向で。
というかできればjavascriptは使わないで実現したいなーとか

色々試してみた

色々捏ねくり回してそれっぽいものができた、ような…
折角なので貼っておきます。

以下のソースをごそっとコピペすると表示されると思います。
とりあえず Windows10 / IE11, Chrome で確認しました。

※ちょっと長いですが、test-1 ～ test-3 は途中行程です。
※実際には test-4 の css のみで OK です。

html

<table class="test-1">
  <tr>
    <th>No.</th>
    <th>Name</th>
    <th>Note</th>
  </tr>
  <tr>
    <td>1</td>
    <td>TEST</td>
    <td>てすとです</td>
  </tr>
  <tr>
    <td class="slash"></td>
    <td class="slash"></td>
    <td rowspan="2" class="slash"></td>
  </tr>
  <tr>
    <td colspan="2" class="slash"></td>
  </tr>
</table>

<table class="test-2">
  <tr><th>No.</th><th>Name</th><th>Note</th></tr>
  <tr><td>1</td><td>TEST</td><td>てすとです</td></tr>
  <tr><td class="slash"></td><td class="slash"></td><td rowspan="2" class="slash"></td></tr>
  <tr><td colspan="2" class="slash"></td></tr>
</table>

<table class="test-3">
  <tr><th>No.</th><th>Name</th><th>Note</th></tr>
  <tr><td>1</td><td>TEST</td><td>てすとです</td></tr>
  <tr><td class="slash"></td><td class="slash"></td><td rowspan="2" class="slash"></td></tr>
  <tr><td colspan="2" class="slash"></td></tr>
</table>

<table class="test-4">
  <tr><th>No.</th><th>Name</th><th>Note</th></tr>
  <tr><td>1</td><td>TEST</td><td>てすとです</td></tr>
  <tr><td class="slash"></td><td class="slash"></td><td rowspan="2" class="slash"></td></tr>
  <tr><td colspan="2" class="slash"></td></tr>
</table>

<hr>

<table class="test-A">
  <tr><th>No.</th><th>Name</th><th>Note</th></tr>
  <tr><td>1</td><td>TEST</td><td>てすとです</td></tr>
  <tr><td class="slash"></td><td class="slash"></td><td rowspan="2" class="slash"></td></tr>
  <tr><td colspan="2" class="slash"></td></tr>
</table>

<table class="test-B">
  <tr><th>No.</th><th>Name</th><th>Note</th></tr>
  <tr><td>1</td><td>TEST</td><td>てすとです</td></tr>
  <tr><td class="slash"></td><td class="slash"></td><td rowspan="2" class="slash"></td></tr>
  <tr><td colspan="2" class="slash"></td></tr>
</table>

<hr>

<table class="test-svg">
  <tr><th>No.</th><th>Name</th><th>Note</th></tr>
  <tr><td>1</td><td>TEST</td><td>てすとです</td></tr>
  <tr><td class="slash"></td><td class="slash"></td><td rowspan="2" class="slash"></td></tr>
  <tr><td colspan="2" class="slash"></td></tr>
</table>


<style>
table { border-collapse: collapse; margin-bottom:1em; }
th, td { padding:2px 5px; border:1px solid #333; height:1.5em; }


/*
  【test-1】linear-gradientでセルの半分を塗りつぶす
   ※「セルの背景色」と「枠線色」 
*/
.test-1  td.slash {
  padding:0 !important;
  background-image:linear-gradient(to top left, #333 50%, #fff 50%);
  background-image:-webkit-linear-gradient(to top left, #333 50%, #fff 50%);
  background-image:-ms-linear-gradient(to top left, #333 50%, #fff 50%);
  /* height:1em; */
  /* ↑ ★tdに何らかの高さを指定しないと、後出の:after要素のheight:100%が効かない。
     （今回は先頭で th, td に対して height を指定しているのでなくても良いが）
     td は height を指定しても、内容値がそれを超えるようなら内容値の分は確保してくれるので最低限の高さを指定しておけば良い */
}

/*
  【test-2】同じく半分塗りつぶしたblock要素を:afterに配置
   ※「透明 transparent」と「黄色」
   ※（分かりやすいように黄色にしている。実際にはセルの背景色）
*/
.test-2  td.slash {
  padding:0 !important;
  background-image:linear-gradient(to top left, #333 50%, #fff 50%);
  background-image:-webkit-linear-gradient(to top left, #333 50%, #fff 50%);
  background-image:-ms-linear-gradient(to top left, #333 50%, #fff 50%);
  /* height:1em; */
}
.test-2 td.slash::after { /* ★追加 */
  content:"";
  display: block;
  width:100%; height:100%; box-sizing:border-box;
  padding:0; margin:0;
  background-image:linear-gradient(to top left, yellow 50%, transparent 50%);
  background-image:-webkit-linear-gradient(to top left, yellow 50%, transparent 50%);
  background-image:-ms-linear-gradient(to top left, yellow 50%, transparent 50%);
}

/*
  【test-3】:after の要素を斜線の太さ分だけ下げる
*/
.test-3 td.slash {
  padding:0 !important;
  background-image:linear-gradient(to top left, #333 50%, #fff 50%);
  background-image:-webkit-linear-gradient(to top left, #333 50%, #fff 50%);
  background-image:-ms-linear-gradient(to top left, #333 50%, #fff 50%);
  /* height:1em; */
}
.test-3 td.slash::after {
  content:"";
  display: block;
  width:100%; height:100%; box-sizing:border-box;
  padding:0; margin:0;
  background-image:linear-gradient(to top left, yellow 50%, transparent 50%);
  background-image:-webkit-linear-gradient(to top left, yellow 50%, transparent 50%);
  background-image:-ms-linear-gradient(to top left, yellow 50%, transparent 50%);
  margin-bottom:-2px; /* ★追加 */ 
}

/*
  【test-4】完成系
*/
.test-4 td.slash {
  padding:0 !important;
  background-image:linear-gradient(to top left, #333 50%, #fff 50%);
  background-image:-webkit-linear-gradient(to top left, #333 50%, #fff 50%);
  background-image:-ms-linear-gradient(to top left, #333 50%, #fff 50%);
  /* height:1em; */
}
.test-4 td.slash::after {
  content:"";
  display: block;
  width:100%; height:100%; box-sizing:border-box;
  padding:0; margin:0;
  background-image:linear-gradient(to top left, #fff 50%, transparent 50%); /* ★黄色→セルの背景色 */
  background-image:-webkit-linear-gradient(to top left, #fff 50%, transparent 50%);
  background-image:-ms-linear-gradient(to top left, #fff 50%, transparent 50%);
  margin-bottom:-2px;
}

/*
  【test-A】最初に見つけた linear-gradient で斜線を引く方法
   td の大きさによって線の太さが変わるのが嫌だった 
*/
.test-A  td.slash {
  background-image: linear-gradient(to top left,
    transparent, transparent 49%,
    red 49%, red 51%,
    transparent 51%, transparent);
}

/*
  【追加：test-B】calc を使う方法
   Chromeでは少しジャギるけど許容範囲
   IE11だと私の環境ではすごい太いぼやけた線になった…何か違うのかな
*/
.test-B  td.slash {
  background: linear-gradient(to top left,
    transparent calc(50% - 0.5px),
    #444 calc(50% - 0.5px),
    #444 calc(50% + 0.5px),
    transparent calc(50% + 0.5px));

  background: -webkit-linear-gradient(to top left,
    transparent calc(50% - 0.5px),
    #444 calc(50% - 0.5px),
    #444 calc(50% + 0.5px),
    transparent calc(50% + 0.5px));

  background: -ms-linear-gradient(to top left,
    transparent calc(50% - 0.5px),
    #444 calc(50% - 0.5px),
    #444 calc(50% + 0.5px),
    transparent calc(50% + 0.5px));
}

/*
  【追加：test-svg】SVG を使う方法
   slash.svg を用意して、それを以下のように指定するだけ
   やだ... 簡単...
*/
.test-svg  td.slash {
  background: url('slash.svg') 100%;
}

</style>

slash.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="100%" x2="100%" y2="0" stroke-width="1" stroke="#333" />
</svg>

問題としては、枠線色と td の背景色が固定になること。
（枠線色や背景色を変えるならその分 css を定義する必要がある）

ただまあ今回私が使う分には問題ないので、ひとまずこれでいきます。

…要素内に斜線て標準で引けても良くない？使わない？そうでもない…？