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

141

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?

Yazanpro
quelle

Antworten:

179
<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;)

Damb
quelle
7
Cellspacing & Cellpadding sind seit 1999 veraltet, siehe developer.mozilla.org/en-US/docs/HTML/Element/table - Sie sollten sich für die @ jnpcl-Lösung entscheiden.
iGEL
iGEL ist richtig, ich habe meine Antwort bearbeitet. Ehrlich gesagt war ich überrascht, dass es so lange veraltet ist und ich es immer noch ohne Probleme
benutzte
91
table {
    border-collapse: collapse;
}
schuften
quelle
Hat
19

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;
}
sean.boyer
quelle
3
Versuchte jeden Vorschlag bis hierher und border: nonebewarb sich schließlich bei tdJekyll, um einen randlosen Tisch zu machen:<td markdown="span" style="padding: 0.5vw; border: none; max-width:100%; max-height:10%; background: transparent;">
Avio
16

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">
Stephan
quelle
1
Dieser Vorschlag hat bei mir in Wordpress funktioniert. Ich hatte Schwierigkeiten, die Grenze nicht durchzusetzen.
Robbpriestley
7

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>    
KLMN
quelle
4

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.

Khozanai
quelle