Wie eliminiere ich Tabellenrandabstände in HTML und CSS?

Eliminierung des Tabellenrandabstands

Der bereitgestellte Code weist übermäßige Abstände zwischen Zeilen und Spalten in der Tabelle auf, was das gewünschte nahtlose Erscheinungsbild behindert. Um dieses Problem zu beheben, implementieren Sie den folgenden Stil:

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Die Eigenschaft „border-collapse:collapse“ führt benachbarte Tabellenränder zusammen und entfernt alle sichtbaren Trennungen zwischen den Elementen. Darüber hinaus gibt das Festlegen von border-spacing auf 0 explizit an, dass der Zellabstand entfernt wird.

Browserübergreifende Kompatibilität

Für browserübergreifende Kompatibilität, insbesondere mit Internet Explorer 6 und 7 ist es unbedingt erforderlich, das Zellenabstandsattribut direkt im Tabellenelement zu verwenden.

<table cellspacing="0">

Aktualisierte Empfehlungen für die Browserunterstützung

Während das direkte Festlegen des Zellenabstands früher für das Internet erforderlich war Die Explorer-Versionen 6 und 7, neuere Versionen des Internet Explorers und andere gängige Browser unterstützen die CSS-Eigenschaft border-spacing. Aus Gründen der browserübergreifenden Kompatibilität empfiehlt es sich, beide Methoden zu verwenden:

table {
  border-collapse: collapse;
  border-spacing: 0;
}

table.no-spacing {
  cellspacing: 0; /* Supports IE6 and IE7 */
}

Das obige ist der detaillierte Inhalt vonWie eliminiere ich Tabellenrandabstände in HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!