Linethrough/strikethrough a whole HTML table row

Question

After some research, I couldn't find an answer to this question. There was this but it didn't really answer my question. I would like to "strikethrough" a complete HTML table row in CSS, not just the text in it. Is it at all possible? From the example that I linked, it seems tr styling doesn't even work in Firefox. (And anyway, text-decoration only applies on text afaik)

Answer 1

Oh yes, yes it is!

CSS:

table {     border-collapse: collapse; }  td {     position: relative;     padding: 5px 10px; }  tr.strikeout td:before {     content: " ";     position: absolute;     top: 50%;     left: 0;     border-bottom: 1px solid #111;     width: 100%; } 

HTML:

<table>     <tr>         <td>Stuff</td>         <td>Stuff</td>         <td>Stuff</td>     </tr>     <tr class="strikeout">         <td>Stuff</td>         <td>Stuff</td>         <td>Stuff</td>     </tr>     <tr>         <td>Stuff</td>         <td>Stuff</td>         <td>Stuff</td>     </tr> </table> 

http://codepen.io/nericksx/pen/CKjbe

Answer 2

My answer (below) said that it is not possible. I was wrong, as pointed out by @NicoleMorganErickson. Please see her answer (and upvote it!) for how to do it. In short, you use :before pseudo-class to create an element that draws a border across the middle of the cell, above the content:

table           { border-collapse:collapse } /* Ensure no space between cells   */ tr.strikeout td { position:relative        } /* Setup a new coordinate system   */ tr.strikeout td:before {                     /* Create a new element that       */   content: " ";                              /* …has no text content            */   position: absolute;                        /* …is absolutely positioned       */   left: 0; top: 50%; width: 100%;            /* …with the top across the middle */   border-bottom: 1px solid #000;             /* …and with a border on the top   */ }     

---

(original answer)

No, it is not possible using only CSS and your semantic table markup. As @JMCCreative suggests, it is possible visually using any number of ways to position a line over your row.

I would instead suggest using a combination of color, background-color, font-style:italic and/or text-decoration:line-through to make the entire row obviously different. (I'd personally strongly 'fade out' the text to a color much closer to the background than normal text and make it italic.)