Colore del bordo della tabella in CSS con collasso del bordo

Voglio mettere una riga sopra un campo in una tabella, per indicare che è una somma dei valori sopra. Tuttavia, la tabella ha già i bordi per impostazione predefinita.Colore del bordo della tabella in CSS con collasso del bordo

Ecco un esempio: Ho una tabella con bordi compressi. Ho impostato il bordo inferiore su un campo e il bordo superiore sul campo sottostante. Entrambi specificano lo stesso confine. Viene utilizzato il CSS per il primo. C'è un modo per usare quello in basso?

<html> 
    <head> 
     <style type="text/css"> 
      table { border-collapse: collapse; } 
      td.first { border-bottom: solid red 1px; } 
      td.second { border-top: solid gold 1px; } 
     </style> 

    <body> 
     <table> 
      <tr><td class="first">Hello</td></tr> 
      <tr><td class="second">World</td></tr> 
     </table> 
    </body> 
</html>

Questo mostra due celle con una linea rossa tra di loro. C'è un modo per ottenere una linea d'oro?

fonte

2010-11-04 Sjoerd

Ha a che fare con la risoluzione del conflitto. [Questa è una pagina] (http://www.the-art-of-web.com/css/bordercollapse/) che spiega come funziona e come il browser calcola i diversi bordi. –

Credo che non ci sia una soluzione CSS per questo, perché il crollo del bordo fa solo quello che fa. È possibile utilizzare alcuni metodi alternativi, ad esempio utilizzare javascript. Avete librerie javascript incluse nel vostro documento? –

L'ho risolto usando jQuery, usando qualcosa del genere: http://www.mail-archive.com/[email protected]/msg89877.html – Sjoerd

Questo è un comportamento definito di border-collapse. Pagina 357 della Guida definitiva dei CSS di O'Reilly terza edizione:

se i bordi di piegatura hanno lo stesso stile e larghezza, ma differiscono nel colore, quindi ... dal più al meno preferito: cella, riga, riga gruppo, colonna, gruppo di colonne, tabella.

se ... provengono dallo stesso tipo di elemento, ad esempio due righe ... il colore viene preso dai bordi che sono il più in alto e il più a sinistra.

Quindi il più alto, che è rosso, vince.

Un modo per sovrascrivere questo può essere utilizzare la cella per il colore per conquistare il colore della riga.

esempio: http://jsfiddle.net/Chapm/

Le regole che hanno precedenza maggiore rispetto a questa "regola stesso colore è"

più ampio confine conquista più strette

e dopo che,

doppio vince su solido, poi tratteggiato, punteggiato, cresta, fuori set, groove, inserto

È possibile utilizzare 2px per l'oro per poter conquistare, e ho cercato in Chrome per usare 1px ma double, e sembra come 1px solid e sarà conquistare la rossa pure. Anche se si desidera utilizzare questo metodo, è consigliabile assicurarsi che i browser supportati si comportino allo stesso modo con questa tecnica.

http://jsfiddle.net/Chapm/2/

fonte

2010-11-04 12:19:23

Questo risolve davvero il mio problema. Tuttavia, non funziona in IE7. – Sjoerd

ho aggiornato con più regole ... sì, questo è abbastanza specifico e potrebbe non essere lo stesso in tutti i tipi di browser. –

Grazie mille! Stavo lottando così male con questo e non avevo idea di cosa stesse succedendo. Il trucco 'double' ha funzionato alla grande. Lo sto usando per mostrare un bordo attorno a un 'TR' al passaggio del mouse. – vaughan

Rimuovere border-collapse: collapse; dal codice, invece impostare l'attributo cellspacing su 0 per la tabella.

fonte

2010-11-04 12:08:42

Che non funziona per me ... –

controlla questo http : //jsfiddle.net/CKHwj/. imposta border-collapse: separato; invece –

Sì ma quello mostra sia l'oro che il bordo rosso (Firefox) –

Basta rimuovere lo td.first { border-bottom: solid red 1px; } dal tuo stile.

Oppure modificare red a gold nel selettore td.first.

Example here.

fonte

2010-11-04 12:10:20 Kyle

basta cambiare border-collapse per separare e impostare border-spacing a zero.

Nota: IE8 supporta la proprietà di spaziatura dei bordi solo se è specificato un! DOCTYPE.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style type="text/css"> 
 
    table { 
 
     border-collapse: separate; 
 
     border-spacing: 0px; 
 
    } 
 
    
 
    td.first { 
 
     border-bottom: solid red 1px; 
 
    } 
 
    
 
    td.second { 
 
     border-top: solid gold 1px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <table> 
 
    <tr> 
 
     <td class="first">Hello</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="second">World</td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

provata su win7 con: Chrome 16, IE 9, FF 9, Safari 5.0.5.

fonte

2012-02-09 13:09:15

La domanda degli OP era piuttosto strana. Non sono sicuro se volesse due confini o no. Sono arrivato qui perché volevo un tavolo con un bordo in cima e in fondo a ciascun '', ma i bordi stavano collassando. Ho provato "border-collapse: separate" e c'erano margini attorno alle celle di cui non potevo liberarmi con i CSS. Era il 'border-spacing: 0' che mi mancava. Grazie per la tua risposta. – Gavin

Colore del bordo della tabella in CSS con collasso del bordo

risposta

Problemi correlati