Come rimuovere completamente i bordi dalla tabella HTML

Il mio obiettivo è fare una pagina HTML che sia simile a una "cornice per foto". In altre parole, voglio fare una pagina bianca che sia circondata da 4 immagini.

Questo è il mio codice:

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

E le classi CSS sono le seguenti:

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

Il mio problema è che sto ottenendo sottili linee bianche tra le celle della tabella, voglio dire che il bordo delle immagini non è continuo. Come posso evitare questi spazi bianchi?

Brian Tompsett - 汤莱恩
Domanda modificata 7º novembre 2017 в 10:07
Programmazione
html css html-table background-image
16º aprile 2011 в 2:39
Non ci sono ancora visualizzazioni
Soluzione
<table cellspacing="0" cellpadding="0">

E nel css:

table {border: none;}

EDIT: Come notato da iGEL, questa soluzione è ufficialmente deprecata (anche se funziona ancora), quindi se si sta iniziando da zero, si dovrebbe andare con la soluzione jnpcl's border-collapse.

In realtà non mi piace molto questo cambiamento finora (non lavoro spesso con le tabelle). Rende alcuni compiti un po' più complicati. Per esempio, quando vuoi includere due bordi diversi nello stesso posto (visivamente), mentre uno è al TOP per una riga, e il secondo è al BOTTOM per l'altra riga. Essi collasseranno (= solo uno di loro sarà mostrato). Allora devi studiare come viene calcolata la "priorità" del bordo e quali stili di bordo sono "più forti" (doppio contro solido ecc.).

Ho fatto così:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

Ora, con il collasso dei bordi, questo non funziona perché c'è sempre un bordo rimosso. Devo farlo in qualche altro modo (ci sono più soluzioni ofc). Una possibilità è usare CSS3 con box-shadow:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​


.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​

Potresti anche usare qualcosa come "groove|ridge|inset|outset" border style con un solo bordo. Ma per me, questo non è ottimale, perché non posso controllare entrambi i colori.

Forse c'è qualche soluzione semplice e bella per far collassare i bordi, ma non l'ho ancora vista e onestamente non ci ho dedicato molto tempo. Forse qualcuno qui sarà in grado di mostrarmi/ci ;)

Damb
Risposta modificata 25º novembre 2012 в 9:31
Commentari (2)
 
table {
    border-collapse: collapse;
}
Aruna Herath
Risposta modificata 6º ottobre 2018 в 3:46
Commentari (0)

Per me avevo bisogno di fare qualcosa del genere per rimuovere completamente i bordi dalla tabella e da tutte le celle. Questo non richiede alcuna modifica dell'HTML, il che è stato utile nel mio caso.

table, tr, td {
    border: none;
}
Commentari (1)