Search code examples
csshtml-tabletext-decorationsstrikethrough

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

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