¿Cómo borrar el paso de línea para un elemento en una fila de la tabla?

Question

Tengo problemas para "borrar" una línea que estoy usando en una fila de la tabla. No quiero el efecto de línea en el enlace. Estoy cambiando dinámicamente la clase tr con Javascript, así que me gustaría mantenerlo lo más simple posible.

Mi código actual:

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

¿Alguna sugerencia?

Answer 1

Estaba jugando con él en jsFiddle. Parece que la única forma de hacerlo es envolver el otro contenido que desea line-through en otro elemento, como span.

Actualización: Código de jsFiddle, conforme a lo solicitado:

<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

Dependiendo de los requisitos del navegador (no va a funcionar en el viejo IE) se puede utilizar:

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

Answer 3

¿Está utilizando span, fuera de la cuestión?

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> 

O estrictamente usando la inyección de código con el estilo de la tachado?

Answer 4

No estoy seguro, por qué nadie ha señalado. Esto es realmente posible.

Aquí está el enlace a tocar el violín

JSFiddle

Adición display: inline-block el elemento que usted no desea mostrar a través de la línea hará el truco.

Probar:

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