2009-11-18 3 views
7

Ich habe einen Code, der einen Zeilenumbruch auf einem TR für gelöschte Zeilen setzt, aber das bedeutet, dass meine "Actions" -Spalte (die nur hat) leidet. Dies liegt daran, dass sich zwischen den Tasten einzelne Leerzeichen befinden, die ebenfalls durchgestrichen werden.CSS Line-Through wird nicht entfernt

Nach dem Einschalten W3Schools stochern, es schreckt mich, warum dieses Beispiel funktioniert nicht:

<html> 
    <head> 
    <style type="text/css"> 

    tr {text-decoration:line-through} 
    </style> 
    </head> 

    <body> 
    <table> 
     <tr> 
     <td>this needs to be line-throughed</td> 
     <td style="text-decoration: none !important;">This shouldn't be line-throughed.</td> 
     </tr> 
    </table> 
    </body> 
</html> 

Wie ich das line-through auf untergeordneten Elemente löschen bin soll?

EDIT Ich habe mein Beispiel aktualisiert - das Problem ist, dass ich will nicht den Stil aus dem übergeordneten Elemente nehmen, nur ein einziges Kind-Element.

+0

CSS funktioniert nicht auf diese Weise. 'h2' und' tr' sind Container, daher können Sie ihren Stil nicht ändern, indem Sie den Stil ihrer Kinder ändern. Siehe Zarembisty oder Dmitris Antworten für die normale Art und Weise, dies zu tun. –

Antwort

0

Sie sollten dafür keine wichtigen oder Inline-Stile verwenden müssen. Versuchen

h2 {text-decoration:line-through;} 
h2 span {text-decoration: none; border: 1px solid black;} 

EDIT

In diesem Fall mit tr da ja Sie Text-Dekoration auf sie angewendet, haben Sie text-decoration aus dem gleichen Element nehmen tr nicht td. Ansonsten tun:

tr td { text-decoration: whatever } 

und dann, wenn

<td style="text-decoration: none;"></td> 
+0

Ich habe geklärt, basierend auf meinem Beispiel, aber tun tr td gilt es für alle TDs, wo ich brauche nur eine individuelle – JustLoren

+1

... auch, dieses Beispiel funktioniert nicht lol – JustLoren

+0

Guter Punkt, ich sollte die Zeile setzen Durch die Tds – JustLoren

1
benötigen

ein ähnliches question eine kleine Weile zurück und nach dieser Antwort war, kann man nicht tun, was Sie erreichen wollen.

EDIT: Bei Ihrem Beispiel, warum nicht nur die Liniendurch gelten Elemente TD einzeln

<html> 
    <head> 
    <style type="text/css"> 

    td.deleted {text-decoration:line-through} 
    </style> 
    </head> 

    <body> 
    <table> 
     <tr> 
     <td class="deleted">this needs to be line-throughed</td> 
     <td>This shouldn't be line-throughed.</td> 
     </tr> 
    </table> 
    </body> 
</html> 
+0

egads eingestellt ist eingestellt, ich hoffe, die Antwort isn ' t "lawl du bist ein Bach ohne Paddel" – JustLoren

+0

wenn im Zweifel gehen mit dem früheren (Dmitri gewinnt) –

0

Die line-through auf die H2 angelegt wird, so dass Sie es aus der H2 zu nehmen.

<html> 
    <head> 
    <style type="text/css"> 

    h2 {text-decoration:line-through} 
    h2.alt { text-decoration: none; } 
    h2.alt span { border: 1px solid black; } 
    </style> 
    </head> 

    <body> 
    <h2>Line-through</h2> 
    <h2 class="alt"><span>This is heading 2, and shouldn't be line-throughed.</span></h2> 
    </body> 
</html> 

(Sichtbarer hier: http://jsbin.com/anopa/)

Das Kind (Span) kann nicht den Stil der Eltern (h2) beeinflussen, das ist, wo der Stil angewendet wird. Sie müssen ändern, wo der Stil ursprünglich angewendet wurde.

Edit: aktualisiert Beispiel

+0

Aber das würde den Zweck zu besiegen, da es ein Kind-Element ist, ich brauche es entfernt, nicht das Elternelement. Das Elternelement "braucht" es zu haben (mit aktuellem Design) – JustLoren

0

Eine Möglichkeit, dies

tr {text-decoration:line-through} 

zu

tr td {text-decoration:line-through} 

Als Ergebnis der Leitungsdurch auf das Individuum zu ändern zu beheben wäre Tabellenzelle und nicht die ganze Zeile. Auf diese Weise können Sie einen anderen Stil für eine einzelne Zelle angeben.

Übrigens scheint das Problem mit dem Beispielcode, den Sie auf IE5.5 + angegeben haben, nicht zu existieren. In FF3.5 verhält sich das Beispiel jedoch so, wie Sie es erläutert haben. Ich bin mir nicht sicher, welches das richtige Verhalten ist.

0

Probieren Sie diese

<html> 
    <head> 
    <style type="text/css"> 

    tr td {text-decoration:line-through;} 
    tr td.noline { text-decoration:none;} 

    </style> 
    </head> 

    <body> 
    <table> 
     <tr> 
     <td>this needs to be line-throughed</td> 
     <td class="noline">This shouldn't be line-throughed.</td> 
     </tr> 
    </table> 
    </body> 
</html> 

Beachten Sie, dass der Stil ist "tr td" für beide.

-1
<td style="text-decoration: none> 

Es funktioniert, es sei denn, Sie versuchen, eine Verknüpfung zu einer URL zu entpacken.

Dann diese Phrase auch die Verbindung besiegt.

Verwandte Themen