TD-Breitenproblem beim Zusammenführen von TD-Zellen

Im folgenden Beispiel ist die Anzeige normal, wenn die Breite des td, das den Namen enthält, 60 Pixel beträgt und die zweite Zeile weniger Wörter enthält. Wenn die zweite Zeile jedoch mehr Wörter enthält, ist die Anzeige abnormal.

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312">
<Titel>123WORDPRESS.COM</Titel>
<style type="text/css">
.mTable{width:200px;border:1px solid #666;border-collapse:collapse}
.mTable td{border:1px solid #666}
</Stil>
</Kopf>
<Text>
<Tabellenbreite="200" Zellenabstand="0" Zellenpadding="0" Klasse="mTable">
<tr>
<td width="60">Name:</td>
<td>Jemand</td>
</tr>
<tr>
<td colspan="2">Persönliches Profil</td>
</tr>
</Tabelle>

<Tabellenbreite="200" Zellenabstand="0" Zellenpadding="0" Klasse="mTable">
<tr>
<td width="60">Name:</td>
<td>Jemand</td>
</tr>
<tr>
<td colspan="2">Persönliches Profil Persönliches Profil Persönliches Profil</td>
</tr>
</Tabelle>
</body>
</html>

Lösung 1: (Stellen Sie auch die Breite der zweiten Spalte auf td ein)

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312">
<Titel>123WORDPRESS.COM</Titel>
<style type="text/css">
.mTable{width:200px;border:1px solid #666;border-collapse:collapse}
.mTable td{border:1px solid #666}
</Stil>
</Kopf>
<Text>
<Tabellenbreite="200" Zellenabstand="0" Zellenpadding="0" Klasse="mTable">
<tr>
<td width="60">Name:</td>
<td width="140">Jemand</td>
</tr>
<tr>
<td colspan="2">Persönliches Profil</td>
</tr>
</Tabelle>

<Tabellenbreite="200" Zellenabstand="0" Zellenpadding="0" Klasse="mTable">
<tr>
<td width="60">Name:</td>
<td width="140">Jemand</td>
</tr>
<tr>
<td colspan="2">Persönliches Profil Persönliches Profil Persönliches Profil</td>
</tr>
</Tabelle>
</body>
</html>

Lösung 2: (Tabellenlayout festlegen: fest)

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312">
<Titel>123WORDPRESS.COM</Titel>
<style type="text/css">
.mTable{width:200px;border:1px solid #666;border-collapse:collapse;table-layout:fixed}
.mTable td{border:1px solid #666}
</Stil>
</Kopf>
<Text>
<Tabellenbreite="200" Zellenabstand="0" Zellenpadding="0" Klasse="mTable">
<tr>
<td width="60">Name:</td>
<td>Jemand</td>
</tr>
<tr>
<td colspan="2">Persönliches Profil</td>
</tr>
</Tabelle>

<Tabellenbreite="200" Zellenabstand="0" Zellenpadding="0" Klasse="mTable">
<tr>
<td width="60">Name:</td>
<td>Jemand</td>
</tr>
<tr>
<td colspan="2">Persönliches Profil Persönliches Profil Persönliches Profil</td>
</tr>
</Tabelle>
</body>
</html>

<<: Drei Strategien zum Umschreiben von MySQL-Abfrageanweisungen

>>: Testfragen und Referenzantworten zum Thema Webdesign und Produktion

Wann sollte man Map anstelle einfacher JS-Objekte verwenden?

Eine kurze Analyse der Beispiele und Unterschiede bei der Verwendung von nohup und screen zum Ausführen von Hintergrundaufgaben in Linux

Die Verwendung eines SSH-Terminals (z. B. Putty, ...

TD-Breitenproblem beim Zusammenführen von TD-Zellen

Wann sollte man Map anstelle einfacher JS-Objekte verwenden?

Detaillierte Erläuterung des Prinzips und der Verwendung von MySQL-gespeicherten Prozeduren

Detaillierte Erklärung der Nginx-Konfigurationsdatei

Native JavaScript-Karussell-Implementierungsmethode

Vue2.x-Reaktionsfähigkeit – einfache Erklärung und Beispiele

Lösung für VMware Workstation Pro, das unter Windows nicht läuft

So erstellen Sie einen Git-Dienst basierend auf dem HTTP-Protokoll auf VMware+CentOS 8

js Canvas realisiert zufällige Partikeleffekte

So erstellen Sie mit Dockerfile ein Spiegelbild der Java-Laufzeitumgebung

Detaillierte Erläuterung des Funktionsprinzips und der Verwendung des Docker-Image-Submission-Befehls Commit

Artikel empfehlen

Zwei Möglichkeiten zum Aktivieren der Firewall im Linux-Dienst

Tutorial zur HTML-Tabellenauszeichnung (29): Farbattribut für helle Zellenränder BORDERCOLORLIGHT

Detaillierte Erläuterung der Implementierung der Titelwiedergabe im WeChat-Applet und der aufgetretenen Fallstricke

Drei Möglichkeiten zum Löschen einer Tabelle in MySQL (Zusammenfassung)

Lösung für den Fehler beim Kompilieren des LVGL-Emulators unter Linux

Tutorial zur Migration von MySQL von phpstudy nach Linux

Das ganz links stehende Übereinstimmungsprinzip des MySQL-Datenbankindex

Eine detaillierte Einführung in die Tomcat-Verzeichnisstruktur

So bedienen Sie das Kontrollkästchen auf einer HTML-Seite

MySQL verwendet mysqldump + binlog, um die Prinzipanalyse der gelöschten Datenbank vollständig wiederherzustellen

So unterstützen Sie Webdings-Schriftarten in Firefox

Eine kurze Analyse der Beispiele und Unterschiede bei der Verwendung von nohup und screen zum Ausführen von Hintergrundaufgaben in Linux

So konfigurieren Sie geplante MySQL-Aufgaben (EVENT-Ereignisse) im Detail

Detaillierte Erläuterung grundlegender Betriebsbefehle wie Starten und Stoppen von Nginx unter Windows

Detaillierte Erläuterung der Datentypprobleme bei der JS-Array-Indexerkennung