8
votes

Comment effacer la ligne de ligne pour un élément dans une rangée de table?

J'ai des difficultés à "effacer" une ligne à travers celle que j'utilise sur une rangée de table. Je ne veux pas l'effet de ligne sur le lien. Je change de la classe TR de manière dynamique avec JavaScript, je voudrais donc le garder aussi simple que possible.

Mon code actuel: P>

HTML: P>

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


2 commentaires

MDC dit: "Les décorations de texte dessinent sur des éléments de descendance. Cela signifie qu'il n'est pas possible de désactiver un descendant une décoration de texte spécifiée sur l'un de ses ancêtres. "


C'est vraiment de bonnes informations, merci.


4 Réponses :


6
votes

Je jouais avec elle dans jsfiddle . On dirait que le seul moyen de le faire consiste à envelopper l'autre contenu que vous souhaitez le ligne code> sur dans un autre élément, comme un span code>.

mise à jour: code De Jsfiddle, comme demandé: P>

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


0 commentaires

0
votes

Selon les exigences de votre navigateur (ne fonctionnerez pas dans l'ancien IE), vous pouvez utiliser:

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


0 commentaires

0
votes

utilise l'étendue, hors de la 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>


0 commentaires

1
votes

Je ne suis pas sûr, pourquoi quelqu'un n'a pas signalé. Ceci est réellement possible.

Voici le lien vers FIDDLE

Jsfiddle

Ajout Affichage: Inline-Block sur l'élément que vous ne voulez pas montrer la ligne vitrée fera le tour.

Essayez: xxx


0 commentaires