Skip / cross out entire row of HTML table

Question

After some research, I could not find the answer to this question. There was this one , but in reality he did not answer my question. I would like to “cross out” the full row of the HTML table in CSS, not just the text in it. Is it possible? In the example I linked, it seems that the tr style does not work even in Firefox. (In general, textual design applies only to afaik text)

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 this is not possible. I was wrong, as @NicoleMorganErickson noted. Please see Her answer (and increase it!), How to do it. In short, you use the :before pseudo-class to create an element that draws a border through 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’s impossible to use only CSS and semantic table markup. As @JMCCreative suggests, you can visually use any number of ways to position a line above your line.

Instead, I would suggest using a combination of color , background-color , font-style:italic and / or text-decoration:line-through so that the entire line is clearly different. (I personally strongly link the text with a color that is closer to the background than regular text, and make it italic.)

Answer 3

The easiest way is to use background-image in tr and its child cells (or just use transparent background-color on these cells).

HTML:

 <table> <thead> <tr> <th>Col One</th> <th>Col Two</th> <th>Col Three</th> </tr> </thead> <tbody> <tr> <td>First row, One-One</td> <td>First row, One-Two</td> <td>First row, One-Three</td> </tr> <tr class="empty"> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

CSS:

 table { empty-cells: show; } th, td { width: 6em; height: 2em; line-height: 2em; border: 1px solid #ccc; } tr.empty, tr.empty td { background: transparent url('http://davidrhysthomas.co.uk/linked/strike.png') 0 50% repeat-x; } 

JS Fiddle demo

Answer 4

 tr { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg=='); background-repeat: repeat-x; background-position: 50% 50%; } 

I used http://www.patternify.com/ to create a 1x1 image URL.

Answer 5

I like Nicole Morgan Erickson's answer , but it can cause side effects if your project runs it verbatim. I added some small tweaks to keep this kosher down ... so we don’t globally change every table or every td with this css .

I also wanted the button in the line to cross out the line, but I did not want to cross out the column with the button, for the sake of visibility. I just wanted to cross out the rest of the line. To do this, I made sure that every column that would like to show a strike must declare it, also being marked with a class. In this iteration, you will need to mark the table as successful, as well as mark each td as successful; but you get security without creating side effects that may not be useful for the tables, and you get control over which columns to cross out.

CSS

 table.strike-able { border-collapse: collapse; } table.strike-able tr td { position: relative; padding: 3px 2px; } table.strike-able tr th { position: relative; padding: 3px 2px; } table.strike-able tr.strikeout td.strike-able:before { content: " "; position: absolute; top: 50%; left: 0; border-bottom: 2px solid #d9534f; width: 100%; } 

Application:

 <table class="strike-able" id="Medications" data-item-count="@Model.Medications.Count"> <tr> <th> Some Column </th> <th> Command Column </th> </tr> <tr class="strikeout"> <td class="strike-able"></td> <td>Button that Toggles Striking Goes Here (active)</td> </tr> <tr> <td class="strike-able"></td> <td>Button that Toggles Striking Goes Here</td> </tr> </table> 

Finally, since I use this with Bootstrap and see removal as a dangerous thing, I formatted the colors a bit to fit my usage.

Answer 6

@NicoleMorganErickson, I like your answer, but I could not get outsourcing to affect only the application string. Also, I needed to apply multiple lines, so I changed your solution to one class.

CSS

 tr.strikeout td:before { content: " "; position: absolute; display: inline-block; padding: 5px 10px; left: 0; border-bottom: 1px solid #111; width: 100%; } 

http://codepen.io/anon/pen/AaFpu

Answer 7

Yes, you can. In the first cell of the row, you create a div containing HR. Float the div to the left and specify its width as% of its containing element, in this case the table cell. It will stretch as wide as you want, through the table cells in this row, even if you want, even outside the width of the table.

This works for me:

 <style> .strikeThrough { height:3px; color:#ff0000; background-color:#ff0000; } .strikeThroughDiv { float:left; width:920%; position:relative; top:18px; border:none; } </style> <table width="900" border="1" cellspacing="0" cellpadding="4"> <tr valign="bottom"> <td> <div class="strikeThroughDiv"><hr class="strikeThrough"/></div> One </td> <td> <label for="one"></label> <input type="text" name="one" id="one" /> </td> <td> <label for="list"></label> <select name="list" id="list"> <option value="One">1</option> <option value="Two">2</option> <option value="Three" selected>3</option> </select> </td> <td> Four </td> <td> Five </td> </tr> </table> 

To control the width of your line, you must specify the width of the cell in the table containing HR. To stylize HR elements, they say you shouldn't make it less than 3 pixels high.

Answer 8

How about the absolute positioning of the superscript of the <hr /> element of the string. Depending on how static or dynamic it should be, it can be a very quick / easy way to go or a lot more complicated.