HTML+CSS-Beispielcode für zusammengeführte Tabellenränder

Wenn wir Tabellen- und td-Tags Rahmen hinzufügen, werden standardmäßig doppelte Rahmen verwendet, wie dieser.

Bildbeschreibung hier einfügen

Wenn wir die Ränder von Tabelle und td zusammenführen möchten, können wir den Attributwert border-collapse so festlegen, dass er im Tabellenstil zusammenfällt. Wie unten dargestellt:

Bildbeschreibung hier einfügen

Schauen Sie sich den Effekt noch einmal an:

Bildbeschreibung hier einfügen

Um die Replikation zu vereinfachen, hier der Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        Tisch{
            Rahmen: 1px durchgehend blau;/*Rahmen zur Tabelle hinzufügen*/
            border-collapse: collapse;/*Grenzen zusammenführen*/
        }
        td{
            Rahmen: 1px durchgehend blau;/*Rahmen zur Zelle hinzufügen*/
        }
    </Stil>
</Kopf>
<Text>
    <Tabelle>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </Tabelle>
</body>
</html>

Damit ist dieser Artikel über den Beispielcode zum Zusammenführen von Tabellenrändern in HTML und CSS abgeschlossen. Weitere relevante Inhalte zum Zusammenführen von Tabellenrändern in HTML finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Detailliertes Beispiel zum Auffinden und Optimieren langsamer SQL-Abfragen in MySQL

>>: Über den Unterschied zwischen der Überprüfung von Elementen und der Anzeige des Quellcodes einer Webseite

Detaillierte Schritte zur Installation von MySQL auf CentOS 7

HTML+CSS-Beispielcode für zusammengeführte Tabellenränder

Detaillierte Schritte zur Installation von MySQL auf CentOS 7

Detaillierte Schritte zur Installation, Konfiguration und Deinstallation von QT5 in Ubuntu 14.04

So verbessern Sie die Startgeschwindigkeit von Idea und beheben Probleme mit verstümmelten Zeichen im Tomcat-Protokoll

Einführung in die Verwendung des MySQL mysqladmin-Clients

Allgemeine DIV-Aufgaben (Teil 2) — Umwandlung in Editoren und verschiedene DIY-Anwendungen von DIV

Wie implementiert Vue die Kommunikation zwischen Komponenten?

Verwenden Sie Docker, um Tomcat bereitzustellen und eine Verbindung zu Skywalking herzustellen

Detaillierter Prozess zur Erstellung eines VR-Panoramaprojekts mit React und Threejs

Nginx-Konfiguration zum Erreichen eines Lastenausgleichs auf mehreren Servern

Probleme und Lösungen bei der Installation von Mininet auf Ubuntu 16.04.4LTS

Artikel empfehlen

Detaillierte Erklärung der Mixin-Verwendung in Vue

So installieren Sie MySQL für Anfänger (erwiesenermaßen effektiv)

So beheben Sie den MySQL-Fehler 10061

Lernprogramm zur Verwendung von HTML-Formular-Tags

HTML implementiert ein festes schwebendes, halbtransparentes Suchfeld auf Mobilgeräten

Zusammenfassung der Dockerfile-Maven-Plugin-Nutzungsanleitung

Analyse des Implementierungsprozesses der Docker-Container-Orchestrierung

Implementierungscode von Nginx Anti-Hotlink und Optimierung in Linux

Detaillierte Erklärung der grundlegenden Interaktion von Javascript

So kompilieren und installieren Sie xdebug in einer Ubuntu-Umgebung

HTML-Tabellen-Tag-Tutorial (44): Tabellenkopfzeilen-Tag

Schriftreferenzen und Übergangseffekte außerhalb des Systems

CSS3 erstellt eine Webanimation, um einen springenden Balleffekt zu erzielen

CSS3 Flex-Layout Justify-Content:Space-Between Die letzte Zeile wird linksbündig ausgerichtet

HTML-Text in vertikalen Spalten anzeigen, um den Text in vertikalen Spalten anzuzeigen