html - Unable to un-line-through a nested element

Question

I want to apply a line-through to the contents of <td> tags except for the <a> tag within a tag. The styles I am applying do not seem to work though... any ideas?

Here's the example to play with (I'm testing in IE8): http://jsfiddle.net/9qbsq/

Here's what the markup looks like...

HTML

<table border=1>
  <tr class="highlight">
      <td>hello</td>
      <td><a href="#">world</a></td>
  </tr>
  <tr>
      <td>foo</td>
      <td>bar</td>
  </tr>
</table>

CSS

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

Answer 1

That's how it should work - whilst the a element does have text-decoration: none, the line through is still being set.

You could add a span in each td as a workaround, and set the text-decoration: line-through on that span if required.