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

Question

I want to create an HTML table in which I am able to cross out cells as shown in the following drawing:

I originally thought about doing a CSS right triangle in the cell, but I couldn't figure out how to color just the hypotenuse and not the other two sides or the triangle itself.

In other words, is what I want to do possible?
Would making an image with a diagonal line and then making that image stretch 100% the width and height of the cell make the most sense?
Thanks.

Answer 1

Well, this is a bit hacky, but it works. Utilize linear-gradient

Using background-image for the current cell, strike through under content

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>

---

Strike through table cell content using pseudo-element

If you want the strike through the content of the cell, you may also use pseudo elements, like this:

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>