Is it possible to cross out cells in an HTML table?

Question

I want to create an HTML table in which I can cross out cells, as shown in the following figure:

I initially thought about making CSS right triangle in a cell, but I could not figure out how to color only the hypotenuse, and not the other two sides or the triangle itself.

In other words, is this what I want to make possible?
Would make an image with a diagonal line, and then making this image 100% stretched, would the cell width and height make the most sense?
Thank.

Answer 1

Well, this is a bit of hacks, but it works. Uselinear-gradient

Using background-imagefor the current cell, scroll through the contents

table
{
  min-width: 100%;
}

table td
{
  border: 1px solid silver;
  position: relative;
}

table td.crossed
{
   background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), red, transparent calc(50% + 1px)); 
}

<table>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
     <tr>
      <td>Content</td>
      <td class="crossed">Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Run codeHide result

---

, , :

table
{
  min-width: 100%;
}

table td
{
  border: 1px solid silver;
  position: relative;
}

table td.crossed::after
{
  position: absolute;
  content: "";
  left:0;
  right:0;
  top:0;
  bottom:0;
   background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), red, transparent calc(50% + 1px)); 
}

<table>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
     <tr>
      <td>Content</td>
      <td class="crossed">Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Hide result

Answer 2

: http://www.landcoder.com/implement-a-strike-through-in-different-directions-horizontal-vertical-diagonal-inside-the-table-231

 <style>
td.diagonalRising
{
   background: linear-gradient(to right bottom, #ffffff 0%,#ffffff     
   49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}

td.diagonalFalling
{
  background: linear-gradient(to right top, #fff 0%,#fff 49.9%,#000000    
 50%,#000000 51%,#fff 51.1%,#fff 100%);
}
<style>

. , , .