How to clear the pass-through for an element in a table row?

Question

I am having the problem of "clearing" the row that I use in the table row. I do not want the line effect to affect the link. I am dynamically changing the tr class using Javascript, so I would like to keep it as simple as possible.

My current code is:

HTML:

<table> <tr class="table-item"> <td>Text</td> <td><a href="#">Delete item</a></td> </tr> </table> 

CSS

 .table-item td { text-decoration: line-through; } .table-item a { text-decoration: none; } 

Any suggestions?

Answer 1

I played with him in jsFiddle . It seems that the only way to do this is to wrap the other content in which you want to include line-through in another element, like a span .

Update: code from jsFiddle, upon request:

 <table> <tr class="table-item"> <td><span>Text</span></td> <td><a href="#">Delete item</a></td> </tr> </table> 

CSS

 .table-item td span { text-decoration: line-through; } 

Answer 2

Depending on the requirements of your browser (does not work in old IE) you can use:

 .table-item td:first-child { text-decoration: line-through; } 

Answer 3

Uses span, is there no question?

 a { text-decoration: none; } td span{ text-decoration: line-through; } <table> <tr class="table-item"> <td><span>Text</span></td> <td><a href="#">Delete item</a></td> </tr> </table> 

Or are you strictly using code injection for the strikethrough style?

Answer 4

I am not sure why no one indicated. It is really possible.

Here is the link to the violin

Jsfiddle

Adding display: inline-block to an element that you don't want to show on the line will do the trick.

Try:

 .table-item td { text-decoration: line-through; } .table-item a { text-decoration: none; display: inline-block; }