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

eliminar todas las filas de una tabla javascript

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

¿Está usando span, fuera de 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 está utilizando estrictamente la inyección de código para darle estilo al tachado?

Answer 2

Dependiendo de los requisitos de su navegador (no funcionará en el viejo IE) puede usar:

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

Answer 3

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

Actualización: código de jsFiddle, según 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 4

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

Aquí está el enlace para violín

JSFiddle

Agregar display: inline-block en display: inline-block el elemento que no quiere mostrar el paso de línea hará el truco.

Tratar:

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