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

Implementierung der Funktion zum Hinzufügen einer Besuchszählung im GitHub+Jekyll-Blog in einer Minute mit JS

TD-Breitenproblem beim Zusammenführen von TD-Zellen

Implementierung der Funktion zum Hinzufügen einer Besuchszählung im GitHub+Jekyll-Blog in einer Minute mit JS

Installieren Sie nodejs und yarn und konfigurieren Sie den Taobao-Quellprozessdatensatz

Aufrufen und Ausführen von Host-Docker-Operationen im Docker-Container

Einführung in die MySQL-Datenbank: Detaillierte Erläuterung des Datenbanksicherungsvorgangs

Realisieren Sie einen super coolen Wasserlichteffekt auf Leinwandbasis

So verwenden Sie iframe, um die Daten anderer Webseiten unter Wahrung der Kompatibilität anzuwenden

CSS-Spezifikation BEM CSS und OOCSS Beispielcode detaillierte Erklärung

So implementieren Sie geplante Sicherungen und inkrementelle Sicherungen hochgeladener Dateien in Linux

Vue implementiert den automatischen Sprung zur Anmeldeseite, wenn das Token abläuft

JS realisiert den Front-End-Paging-Effekt

Artikel empfehlen

Vor- und Nachteile des Tabellenlayouts und warum es nicht empfohlen wird

Lösen Sie schnell das Problem, dass CentOS in VMware nicht auf das Internet zugreifen kann

So installieren Sie Docker auf Ubuntu20.04 LTS

Schreiben eines Schere-Stein-Papier-Spiels in JavaScript

Mysql löst das N+1-Abfrageproblem der Datenbank

Lösung für MySQL: Das Installationsprogramm wird im Community-Modus ausgeführt

Detaillierte Erläuterung der kombinierten MySQL-Indexmethode

Implementierung interaktiver Daten zwischen QT und Javascript

Vue implementiert Multi-Grid-Eingabefeld auf mobilem Endgerät

Detaillierte Erläuterung der Installationsbefehle für Linux-Systemsoftware basierend auf Debian (empfohlen)

Detaillierte Erläuterung des durch die CSS-Positionierung verursachten hierarchischen Beziehungsproblems

Detaillierte Erklärung des Explain-Typs in MySQL

Hadoop 2.x vs. 3.x 22-Punkte-Vergleich, Hadoop 3.x Verbesserungen gegenüber 2.x

TortoiseSvn Little Turtle Installation Neuestes ausführliches Grafik-Tutorial

So realisieren Sie die vertikale Anordnung von Text mit CSS3