CSS: How to clear line-through for an element in a table row?


Tags: css,table,strikethrough,text-decorations

Problem :

I'm having trouble "clearing" a line-through that I'm using on a table row. I don't want the line-through effect on the link. I'm changing the tr class dynamically with javascript so I would like to keep it as simple as possible.

My current code:

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?



Solution :

I was playing with it in jsFiddle. Seems like the only way to do it is to wrap the other content that you want the line-through on in another element, like a span.

Update: code from jsFiddle, as requested:

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

    CSS Howto..

    How do I use a sprite background image to display once on an element (no-repeat)?

    How can I prevent styles from applying to certain HTML snippets?

    CSS How to put an image between buttons?

    How to contain text box in parent div

    How to randomly pick colors and shapes from a for loop and display it in another div?

    How is “:after” element's height and width determined? [closed]

    How to let 3 div columns extend the height until hit the bottom of the page?

    How to make diagonal titles on html tables

    How to disable css warning “Unknown property” in Eclipse Mars?

    How to remove Menu Item Class form secondary menu

    How to change the width of bootstrap popover

    How to make image hover in css?

    how to center and Crop an image to square with CSS

    My entire text in aspx page font be in arial. How to change it in css [closed]

    How can I tell if a particular CSS property is inherited with jQuery?

    How to conditionally load CSS

    How do I make my css class footer go from the left to right side of the screen?

    HTML/CSS: How to use another font for list-item Bullets

    How can I change the numbering of an order list's items?

    How can I make this kind of a border?

    How to draw solid/dotted/dashed lines using most basic HTML/CSS possible (for tcpdf to render them correctly)

    How to change CSS class of a HTML page element using ASP.NET?

    How to override some CSS class settings

    How to blur only background and not content in Ionic/CSS

    How do i apply scroll for long horizontal background image?

    How to reference nested classes with css?

    How to make an image follows scrolling until a certain point

    Show Pinterest hover buttons only on images with specified class

    Two sprites on same position: how to make this happen?

    How to create three columns in css