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 eine Website Anzeigen schalten?

TD-Breitenproblem beim Zusammenführen von TD-Zellen

Wann sollte eine Website Anzeigen schalten?

HTML-Tipps, um Ihren Code semantisch zu gestalten

Zusammenfassung von 6 Methoden zur Anzeige von Linux-Protokollen

Unter Windows 10 Linux Ubuntu 18.04 als Dualsystem installieren (Installationsanleitung)

Problem beim Wechseln der Registerkarten für die Handschrift von React

Beispielcode zum Testen einer Technologieanwendung basierend auf Docker+Selenium Grid

Was sind die neuen Funktionen von Apache Spark 2.4, das 2018 veröffentlicht wird?

Die Verbindung zwischen JavaScript-Konstruktoren und Prototypen

Detaillierte Erläuterung des Ausführungsprozesses von MySQL-Abfrageanweisungen

Die Tabelle verwendet: nth-child(), um abwechselnde Farbänderungen und Ausrichtungen zu erreichen

Artikel empfehlen

Beispiel für die Verwendung von Docker zum Erstellen eines ELK-Protokollsystems

Zusammenfassung der Linux-Befehlsmethoden zum Anzeigen verwendeter Befehle

Detailliertes Verständnis und vergleichende Analyse der Server Apache, Tomcat und Nginx

CSS-Standard: Eigenschaft „vertical-align“

Detaillierte Erläuterung der grundlegenden Verwendung von MySql-Stored-Procedure-Parametern

So implementieren Sie Hot Deployment und Hot Start in Eclipse/Tomcat

Methode zum dynamischen Laden von Geojson basierend auf Vue+Openlayer

Praktische Erklärung zum Bearbeiten, Speichern und Beenden von Dateien unter Linux

Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 1

JavaScript implementiert die Eingabeüberprüfung im Kennwortfeld

Vue - benutzerdefinierte gekapselte Schaltflächenkomponente

Tiefgreifendes Verständnis des relativen Pfads (Relative Path) und des absoluten Pfads (Absolute Path) in HTML

Eine kurze Diskussion über die Verwendung von Vue zur Fertigstellung des mobilen APK-Projekts

Virtueller vsftpd-Benutzer basierend auf MySql-Authentifizierung

Über das Problem, dass nach der VMware-Installation keine virtuelle Netzwerkkarte vorhanden ist