Mijn doel is om een HTML-pagina te maken die lijkt op een “fotolijst”. Met andere woorden, ik wil een blanco pagina maken met daaromheen 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 afbeeldingen niet doorlopend is. Hoe kan ik deze witruimten vermijden?

Antwoord 1, autoriteit 100%

<table cellspacing="0" cellpadding="0">

En in css:

table {border: none;}

bewerken:
Aangezien IGEL opgemerkt, wordt deze oplossing officieel verouderd (werkt echter nog steeds), dus als u vanaf nul begint, moet u gaan met de JNPCL’s Border-Collapse-oplossing.

Ik vind deze verandering tot nu toe behoorlijk niet leuk (werk dat vaak niet met tafels). Het maakt wat taken wat gecompliceerder. B.v. Wanneer u twee verschillende randen op dezelfde plaats (visueel) wilt opnemen, terwijl iemand de bovenkant is voor één rij en de tweede onderkant voor een andere rij. Ze zullen instorten (= slechts een van hen wordt getoond). Dan moet je bestuderen hoe de “prioriteit” van de grens is berekend en welke grensstijlen “sterker” zijn (dubbele versus vaste enz.).

Ik vond dit 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 de ineenstorting van de grens, dit zal niet werken omdat er altijd een rand is verwijderd. Ik moet het op een andere manier doen (er zijn meer oplossingen van C). Eén mogelijkheid is het gebruik van CSS3 met doos-schaduw:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​
<style>
.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;}​
</style>

Je zou ook iets als “groove|ridge|inset|outset” randstijl kunnen gebruiken met slechts een enkele rand. Maar voor mij is dit niet optimaal, omdat ik beide kleuren niet in de hand heb.

Misschien is er een eenvoudige en leuke oplossing voor het instorten van grenzen, maar ik heb het nog niet gezien en ik heb er eerlijk gezegd niet veel tijd aan besteed. Misschien kan iemand hier het mij/ons laten zien 😉

Antwoord 2, autoriteit 51%

table {
    border-collapse: collapse;
}

Antwoord 3, autoriteit 16%

Voor mij moest ik zoiets doen om de randen van de tabel en alle cellen volledig te verwijderen. Dit vereist helemaal geen aanpassing van de HTML, wat in mijn geval handig was.

table, tr, td {
    border: none;
}

Antwoord 4, autoriteit 10%

In een bootstrap-omgeving hielp geen van de beste antwoorden, maar door het volgende toe te passen, werden alle randen verwijderd:

.noBorder {
    border:none !important;
}

Toegepast als:

<td class="noBorder">

Antwoord 5, autoriteit 5%

In een bootstrap-omgeving is hier mijn oplossing:

   <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>    

Antwoord 6, autoriteit 2%

Dit is wat het probleem voor mij heeft opgelost:

Voeg dit toe aan je HTML tr-tag:

style="border-collapse: collapse; border: none;"

Hiermee zijn alle randen verwijderd die op de tabelrij stonden.

Antwoord 7

Met de TinyMCE-editor kon ik alleen alle randen verwijderen door border:hiddente gebruiken in de stijl als volgt:

<style>
table, tr {border:hidden;}
td, th {border:hidden;}
</style>

En in de HTML als volgt:

<table style="border:hidden;"</table>

Proost

Antwoord 8

Gebruik deze CSS-stijl in uw algemene CSS

.table,
.monthview-datetable td,
.monthview-datetable th {
  border: none !important;
}