Wie man die Ränder einer HTML-Tabelle vollständig entfernt

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

Dies 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 weißen Linien vermeiden?

Brian Tompsett - 汤莱恩
Bearbeitete Frage 7. November 2017 в 10:07
Programmierung
html css html-table background-image
16. April 2011 в 2:39
2 Aufrufe
Lösung
<table cellspacing="0" cellpadding="0">

Und in css:

table {border: none;}

EDIT: Wie iGEL feststellte, ist diese Lösung offiziell veraltet (funktioniert aber immer noch). Wenn Sie also von Grund auf neu anfangen, sollten Sie die jnpcl's border-collapse-Lösung verwenden.

Ich mag diese Änderung eigentlich nicht so sehr (ich arbeite nicht so oft mit Tabellen). Sie macht einige Aufgaben etwas komplizierter. Z.B. wenn man zwei verschiedene Ränder an der gleichen Stelle (visuell) einfügen will, während einer für eine Zeile OBEN und der zweite für die andere Zeile UNTEN ist. Sie werden zusammenfallen (= nur einer von ihnen wird angezeigt). Dann müssen Sie untersuchen, wie die Priorität der Rahmen berechnet wird und welche Rahmenstile stärker sind (doppelt vs. massiv etc.).

Das hat mir 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;}

Jetzt, mit dem Zusammenklappen des Rahmens, wird dies nicht funktionieren, da immer ein Rahmen entfernt wird. Ich muss es auf eine andere Art und Weise tun (es gibt mehr Lösungen ofc). 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>​​​


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

Man könnte auch so etwas wie "groove|ridge|inset|outset" border style mit nur einem einzigen Rahmen verwenden. Aber für mich ist das nicht optimal, weil ich nicht beide Farben kontrollieren kann.

Vielleicht gibt es eine einfache und schöne Lösung für kollabierende Ränder, aber ich habe sie noch nicht gesehen und ich habe ehrlich gesagt nicht viel Zeit damit verbracht. Vielleicht kann es mir/uns hier jemand zeigen ;)

Damb
Bearbeitete Antwort 25. November 2012 в 9:31
Kommentare (2)
 
table {
    border-collapse: collapse;
}
Aruna Herath
Bearbeitete Antwort 6. Oktober 2018 в 3:46
Kommentare (0)

Bei mir musste ich so etwas tun, um die Ränder der Tabelle und aller Zellen vollständig zu entfernen. Dabei muss der HTML-Code überhaupt nicht geändert werden, was in meinem Fall hilfreich war.

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