TD-Breitenproblem beim Zusammenführen von TD-Zellen

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

Artikel empfehlen

Webinterview: Der Unterschied zwischen MVC und MVVM und warum Vue nicht vollständig mit MVVM kompatibel ist

Inhaltsverzeichnis Unterschied zwischen MVC und M...

So rufen Sie mit dem Flash-Plugin die Kamera des PCs auf und binden diese in die TML-Seite ein

Vorwort Der Grund für das Schreiben dieses Artikel...

Detaillierte Erläuterung des MySQL-Clusterindex und des Nicht-Clusterindex

1. Clustered-Index Tabellendaten werden in der Re...

Beispiel für die Verwendung von CSS3 zum Anordnen von Elementen um einen Mittelpunkt

Dieser Artikel zeigt ein Beispiel, wie CSS3 verwe...

Beispielcode für ein Mysql-SQL-Überwachungsskript für langsame Abfragen

1. Ändern Sie my.cnf #Der Gesamteffekt besteht da...

Zusammenfassung der Vorsichtsmaßnahmen beim Schreiben von EDM in HTML (allgemeine Vorsichtsmaßnahmen beim Senden von E-Mails)

Formatkodierung 1. Bitte stellen Sie die Seitenbr...

Native JavaScript-Implementierung des Fortschrittsbalkens

Der spezifische Code für JavaScript zur Implement...

Detaillierte Schritte zur Installation von rockerChat im Docker und zum Einrichten eines Chatrooms

Umfassende Dokumentation GitHub-Adresse https://g...

So wählen Sie alle untergeordneten Elemente aus und fügen ihnen in CSS Stile hinzu

Verfahren: Nehmen wir „less“ im tatsächlichen Pro...

Implementierungsmethode des Nginx+Tomcat-Lastausgleichsclusters

Die experimentelle Umgebung ist wie folgt Hier mü...

Connector-Konfiguration in Tomcat

JBoss verwendet Tomcat als Webcontainer. Die Konf...

MySQL 5.7-Bereitstellung und Remotezugriffskonfiguration unter Linux

Vorwort: Vor Kurzem werde ich mit meinen Partnern...

So sammeln Sie Nginx-Protokolle mit Filebeat

Mithilfe von Nginx-Protokollen lassen sich Benutz...

nuxt.js Konfiguration mehrerer Umgebungsvariablen

Inhaltsverzeichnis 1. Einleitung 2. Szenario 3. S...

Ausführliches Tutorial zur CentOS-Installation von MySQL5.7

In diesem Artikel werden die detaillierten Schrit...