Doppio bordo tratteggiato durante l'utilizzo di colspan

Ho un problema semplice, ma la ricerca in rete non ha prodotto alcun risultato.Doppio bordo tratteggiato durante l'utilizzo di colspan

Ho una tabella

<table> 
    <tr> 
     <td colspan="3"> 
      <img src="something.png" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Hello 
     </td> 
     <td> 
      World 
     </td> 
     <td> 
      ! 
     </td> 
    </tr> 
</table>

Gli <tr> elementi hanno tutti border-top: dotted 1px black, questo funziona bene a parte il <td> elemento centrale nella seconda <tr>.

Questo elemento ha un doppio bordo e quindi appare come una linea continua, rimuovendo lo colspan risolve il problema.

ho cercato applicando border-collapse: collapse al tavolo e questo non ha funzionato, ho provato ad aggiungere contenuti sotto forma di   all'interno della prima <td> invece di un'immagine e questo non ha funzionato neanche.

Qualche idea a qualcuno?

fonte

2011-10-11 Jake N

è il tavolo ha anche confine? prova con il bordo della tabella di impostazione come nessuno. – punit

Il '

' non ha bordi e '

non ha bordi. –

In quale browser si trova questo? Non lo trovo in un jsfiddle con Firefox 7.0.1: http://jsfiddle.net/yePHg/ – Pat

risposta

Aggiunta border-collapse: separate; al vostro tavolo consente di risolvere il problema, vedere http://jsfiddle.net/quyMy/

Ho aggiunto un banco di prova dinamica a quel violino. Fai clic ovunque, e la visibilità della tabella originale/nuova si alternerà, permettendoti di vedere la differenza molto più facilmente.

Un altro modo per sbarazzarsi del bordo imprevisto è aggiungere un semplice <tr></tr> dopo la riga contenente <td colspan=3>.

fonte

2011-10-22 14:26:52

Nessuna risposta solida ancora Rob W. Quindi, hai vinto! –

mi ha salvato un paio di cicli. Grazie! – Hcabnettek

Se si imposta il bordo sulle celle della tabella anziché sulle righe della tabella, funzionerà.

Posso solo riprodurre l'errore in IE, ma ci sono altri problemi noti con il modo in cui le tabelle in IE rendono i bordi.

vedere questo: http://jsfiddle.net/yePHg/19/

fonte

2011-10-12 22:19:13 Victor

Grazie Vittorio, sono sicuro di aver provato questo però. Ci riproverò. –

tenta di aggiungere questo css:

<style> 
table, table * { border:0; padding:0; margin:0 } 
table td { border-top:1px dotted #000 } 
</style>

fonte

2011-10-22 11:57:17 bogdanmogo

Aggiungere una riga con un < hr /> tra e poi dare il confine che hr

http://jsfiddle.net/Y5Gec/

fonte

2011-10-27 11:28:51 HerrSerker

upvoted per una correzione rispettabile pronta all'uso. Approccio interessante – Hcabnettek

Provate ad applicare css display: block; sulla tr:

 
    tr 
    { 
     border-top: 1px dotted #000; 
     display: block; 
    }

fonte

2011-10-28 06:59:44 ambay

mi ha colpito questo stesso problema !

border-collapse: separate

ha funzionato benissimo, ma ha anche separato i miei confini (scioccante, vero?). Volevo una singola linea tratteggiata. Quindi ecco cosa ho fatto.

CSS:

td { 
border-right: 1px dotted #bbb; 
border-left: 1px dotted #bbb; 
border-bottom: 1px dotted #bbb; 
border-top: none; 
padding: .5em; 
} 

th { 
border-right: 1px dotted #bbb; 
border-left: 1px dotted #bbb; 
border-top: 1px dotted #bbb; 
border-top: 1px solid #bbb; 
padding: .5em; 
}

HTML

<table border="1"> 
    <tr> 
     <th colspan="5"> DRESSES &amp; TOPS </th> 
    </tr> 
    <tr> 
     <td> size </td> 
     <td> numerical </td> 
     <td> bust </td> 
     <td> waist </td> 
     <td> hip< </td> 
    </tr> 
</table>

fonte

2012-06-13 20:29:30

Problemi correlati