2009-11-18 13 views
7

Ho un codice che mette un line-through su un TR per le righe cancellate, ma questo significa che il mio pulsante "Azioni" (che ha solo) pulsanti soffre. Questo perché ci sono spazi individuali tra i pulsanti, che finiscono per ottenere anche il line-through.CSS Line-Through non rimosso

Dopo aver frugato in W3Schools, mi boggles perché questo esempio non funziona:

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

Come faccio a cancellare la linea-attraverso su elementi figlio?

EDIT ho aggiornato il mio esempio - il problema è che io non voglio prendere lo stile fuori l'elemento padre, un solo elemento figlio.

+0

CSS non funziona in questo modo. 'h2' e' tr' sono contenitori, quindi non puoi cambiare il loro stile cambiando lo stile dei loro figli. Vedi le risposte di Zarembisty o Dmitri per il modo normale di farlo. –

risposta

0

Non è necessario utilizzare stili importanti o incorporati per questo. Prova

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

EDIT

In questo caso con tr dal sì text-decoration è stato applicato ad esso, si deve prendere text-decoration fuori lo stesso elemento TR non td. In caso contrario fare:

tr td { text-decoration: whatever } 

e poi, quando aveva bisogno di

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

Ho chiarito in base al mio esempio, ma facendo tr td lo applica a tutti i TD, dove ho bisogno di uno solo uno – JustLoren

+1

... anche, questo esempio non funziona lol – JustLoren

+0

Buon punto, dovrei mettere la linea- attraverso i tds – JustLoren

1

C'era una simile question indietro un po 'e in base a tale risposta non si può fare ciò che si sta cercando di realizzare.

EDIT: Dato il tuo esempio, perché non basta applicare la linea-through a TD elementi singolarmente

<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, spero che la risposta non sia "stai in un torrente senza pagaia" – JustLoren

+0

in caso di dubbio vai con il precedente (Dmitri vince) –

0

La linea-through viene applicato al H2, quindi bisogna toglierlo di H2.

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

(visibile qui: http://jsbin.com/anopa/)

Il bambino (arco) non può influire lo stile del genitore (H2), che è dove viene applicato lo stile. Devi modificare il punto in cui è stato originariamente applicato lo stile.

Edit: esempio aggiornato

+0

Ma ciò vanificherebbe lo scopo, dal momento che è un elemento figlio di cui ho bisogno rimosso, non l'elemento genitore. L'elemento genitore ha "bisogno" di averlo (con il design attuale) – JustLoren

0

Un modo per risolvere questo problema sarebbe quello di cambiare

tr {text-decoration:line-through} 

a

tr td {text-decoration:line-through} 

Di conseguenza, la linea-through è l'individuo cella di tabella e non l'intera riga. Questo ti permette di specificare uno stile diverso su una singola cella.

BTW, il problema non sembra esistere con il codice di esempio che hai fornito su IE5.5 +. In FF3.5, tuttavia, l'esempio si comporta come hai spiegato. Non sono sicuro di quale sia l'effettivo comportamento corretto.

0

Try This

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

Si noti che lo stile è "tr td" per entrambi.

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

Funziona, a meno che quello che stai cercando di annullare è un collegamento a un URL.

Quindi questa frase sconfigge anche il collegamento.

Problemi correlati