Hoe de randen van een HTML tabel volledig te verwijderen

Mijn doel is om een HTML pagina te maken die lijkt op een "photo frame". Met andere woorden, ik wil een lege pagina maken die omgeven is door 4 foto's.

Dit is mijn code:

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

En de CSS klassen zijn de volgende:

.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');       
}

Mijn probleem is dat ik dunne witte lijnen krijg tussen de cellen van de tabel, ik bedoel dat de rand van de afbeeldingen niet ononderbroken is. Hoe kan ik deze witte lijnen vermijden?

Brian Tompsett - 汤莱恩
Bewerkte vraag 7de1 november 2017 в 10:07
Programmering
html css html-table background-image
16de5 april 2011 в 2:39
Nog geen meningen
Oplossing
<table cellspacing="0" cellpadding="0">

En in css:

table {border: none;}

EDIT: Zoals iGEL opmerkte, is deze oplossing officieel afgeschreven (werkt nog wel), dus als je vanaf nul begint, kun je beter voor de jnpcl's border-collapse oplossing gaan.

Ik vind deze verandering tot nu toe eigenlijk niet zo leuk (werk niet zo vaak met tabellen). Het maakt sommige taken wat ingewikkelder. Bijvoorbeeld wanneer je twee verschillende randen op dezelfde plaats wilt hebben (visueel), terwijl de ene TOP is voor de ene rij, en de tweede BOTTOM voor de andere rij. Zij zullen samenvouwen (= slechts één van hen zal worden getoond). Dan moet je bestuderen hoe de "prioriteit" van de rand wordt berekend en welke randstijlen "sterker" zijn (dubbel vs. solid etc.).

Ik vond dit wel leuk:

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

Nu, met border collapse, zal dit'niet werken omdat er altijd een border verwijderd wordt. Ik moet het op een andere manier doen (er zijn meer oplossingen ofc). Een mogelijkheid is het gebruik van CSS3 met 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;}​

Je zou ook iets als "groove|ridge|inset|outset" border style kunnen gebruiken met slechts een enkele rand. Maar voor mij is dit niet optimaal, omdat ik niet beide kleuren kan controleren.

Misschien is er een eenvoudige en mooie oplossing voor het samenvouwen van randen, maar die heb ik nog niet gezien en ik heb er eerlijk gezegd nog niet veel tijd aan besteed. Misschien dat iemand hier het mij/ons kan laten zien ;)

Damb
Bewerkt antwoord 25ste6 november 2012 в 9:31
Commentaren (2)
 
table {
    border-collapse: collapse;
}
Aruna Herath
Bewerkt antwoord 6de5 oktober 2018 в 3:46
Commentaren (0)

Voor mij moest ik zoiets doen om de randen van de tabel en alle cellen volledig te verwijderen. Hiervoor hoeft de HTML helemaal niet aangepast te worden, wat in mijn geval handig was.

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