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

Analyse des Tutorials zur Implementierung der Remote-Anmeldung unter Linux

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

Analyse des Tutorials zur Implementierung der Remote-Anmeldung unter Linux

Problem mit Zeitzonenfehler im Docker-Container

Vue implementiert ein Suchfeld mit einer Lupe

Detaillierte Erklärung der Interaktion zwischen React Native und IOS

Lombok-Implementierung JSR-269

CSS3 erstellt 3D-Würfel-Ladeeffekte

Vue realisiert die Bildschirmanpassung von Großbildschirmseiten

Docker-Port-Mapping und externe Unzugänglichkeitsprobleme

Installation von mysql5.7 und Implementierungsprozess der langfristigen kostenlosen Nutzung von Navicate

Detaillierte Schritte zur Installation eines Hadoop-Clusters unter Linux

Artikel empfehlen

Detaillierte Erläuterung der Konfiguration des Samba-Ordnerfreigabeservers unter CentOS

Eine kurze Erläuterung, warum Daemon Off beim Ausführen von Nginx in Docker verwendet wird

Detaillierte Erklärung zur Verwendung von Scoped Slots in Vue.js-Slots

Warum wird in Vue nicht empfohlen, einen Index als Schlüsselattributwert zu verwenden?

Ein einfaches Beispiel für die MySQL-Suche nach Daten im Umkreis von N Kilometern

Web-Frontend-Entwicklung CSS-bezogene Teamzusammenarbeit

So teilen Sie Daten in MySQL-Tabellen und -Datenbanken auf

JavaScript zum Anzeigen versteckten Formulartexts

Tipps zur MySQL-Leistungsoptimierung

Ein Beispiel für die Ausführungsreihenfolge zwischen dem href-Sprung und dem onclick des HTML-Hyperlinks a-Tag

Tipps zur Verwendung kleiner HTML-Tags

Zusammenfassung mehrerer Implementierungen der Rückkehr zum Anfang in HTML-Seiten

innerHTML-Anwendung

Sprungcode für HTML-Seite

Sieben Möglichkeiten zur Implementierung der Array-Deduplizierung in JS