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:

Table with crossed out cells

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.

Possible duplicate - http://stackoverflow.com/questions/17602291/diagonal-line-through-div-or-span — Paulie_D, May 21 '15 at 14:38
JavaScript solution here: http://stackoverflow.com/questions/8127035/how-to-create-a-diagonal-line-within-a-table-cell — Renfei Song, May 21 '15 at 14:40
CSS alone solution http://stackoverflow.com/questions/14593415/how-to-strike-through-obliquely-with-css — Pugazh, May 21 '15 at 14:45

Nico O · Accepted Answer · 2015-05-21T15:07:32.807

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>

Nice solution. Please keep in mind that IE8 and IE9 won't be able to display these gradients. http://caniuse.com/#feat=css-gradients — Damien, May 21 '15 at 14:59
@Damien thanks for your comment. You are right. If these browsers are in the list of requirements, you will have to prepare a fallback solution, maybe using static images or other solutions that have been linked. — Nico O, May 21 '15 at 15:01
This solution does not works for oldest browser versions... I am trying to find a solution to do this in IE8 (but is not easly) — Daniel Paiva, Aug 02 '18 at 09:00
With some sizes I saw a little part of a line at the bottom right corner. Adding `background-repeat: no-repeat;` fixed the problem. — Daniel, Nov 17 '20 at 13:19

score 1 · Answer 2 · edited Feb 07 '19 at 22:04

 <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>

The above link will explain you further. It also support all directions, vertical, horizontal or diagonal.

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

2 Answers2

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

Strike through table cell content using pseudo-element

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