So entfernen Sie Ränder vollständig aus der HTML-Tabelle

Mein Ziel ist es, eine HTML-Seite zu erstellen, die einem "Fotorahmen" ähnelt. Mit anderen Worten, ich möchte eine leere Seite erstellen, die von 4 Bildern umgeben ist.

Das ist mein 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>

Und die CSS-Klassen sind die folgenden:

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

Mein Problem ist, dass ich dünne weiße Linien zwischen den Zellen der Tabelle bekomme. Ich meine, dass der Rand der Bilder nicht durchgehend ist. Wie kann ich diese Leerzeichen vermeiden?

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

Und in CSS:

table {border: none;}

BEARBEITEN : Wie iGEL feststellte, ist diese Lösung offiziell veraltet (funktioniert jedoch immer noch). Wenn Sie also bei Null anfangen, sollten Sie sich für die Border-Collapse-Lösung von jnpcl entscheiden.

Ich mag diese Änderung bisher eigentlich nicht (arbeite nicht so oft mit Tabellen). Dies macht einige Aufgaben etwas komplizierter. Zum Beispiel, wenn Sie zwei verschiedene Ränder (visuell) an derselben Stelle einfügen möchten, während einer für eine Zeile OBEN und für eine andere Zeile UNTEN ist. Sie werden zusammenbrechen (= nur einer von ihnen wird angezeigt). Dann müssen Sie untersuchen, wie die "Priorität" des Randes berechnet wird und welche Randstile "stärker" sind (doppelt gegen fest usw.).

Mir hat das gefallen:

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

Wenn der Rand zusammenbricht, funktioniert dies nicht mehr, da immer ein Rand entfernt wird. Ich muss es auf andere Weise tun (es gibt mehr Lösungen von c). Eine Möglichkeit ist die Verwendung von CSS3 mit Box-Shadow:

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

Sie können auch den Randstil "Groove | Ridge | Inset | Outset" mit nur einem einzigen Rand verwenden. Für mich ist dies jedoch nicht optimal, da ich nicht beide Farben steuern kann.

Vielleicht gibt es eine einfache und nette Lösung für das Zusammenbrechen von Grenzen, aber ich habe sie noch nicht gesehen und ehrlich gesagt nicht viel Zeit damit verbracht. Vielleicht kann mir hier jemand / uns zeigen;)

table {
    border-collapse: collapse;
}

Für mich musste ich so etwas tun, um die Ränder vollständig aus der Tabelle und allen Zellen zu entfernen. Dies erfordert überhaupt keine Änderung des HTML-Codes, was in meinem Fall hilfreich war.

table, tr, td {
    border: none;
}

In einer Bootstrap-Umgebung hat keine der wichtigsten Antworten geholfen, aber durch Anwenden der folgenden Punkte wurden alle Rahmen entfernt:

.noBorder {
    border:none !important;
}

Angewandt als:

<td class="noBorder">

In einer Bootstrap-Umgebung ist hier meine Lösung:

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

Dies hat das Problem für mich gelöst:

Fügen Sie in Ihrem HTML-tr-Tag Folgendes hinzu:

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

Dadurch wurden alle Ränder entfernt, die in der Tabellenzeile angezeigt wurden.