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

Question

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?

[MDC](https://developer.mozilla.org/en/CSS/text-decoration#Notes) says: “Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.” — Marcel Korpel, Apr 26 '11 at 14:54

Austin Taylor · Accepted Answer · 2011-04-26T17:21:26.263

6

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

edited Apr 26 '11 at 17:21

answered Apr 26 '11 at 14:58

Austin Taylor

5,267
21
28

score 1 · Answer 2 · answered Sep 28 '16 at 08:27

I am not sure, why anyone has not pointed out. This is actually possible.

Here is the link to fiddle

JSFiddle

Adding display: inline-block on element which you dont want to show line-through will do the trick.

Try:

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

score 0 · Answer 3 · answered Apr 26 '11 at 15:04

0

Depending on your browser requirements (won't work in old IE) you can use:

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

answered Apr 26 '11 at 15:04

jeroen

88,615
21
107
128

score 0 · Answer 4 · answered Apr 26 '11 at 15:13

Is using span, out of the 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 to style the strikethrough?

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

4 Answers4