Die Breite der Tabellenzelle td ist ungültig und der interne Inhalt dehnt sie immer aus

Die Breite der Tabellenzelle td ist ungültig und der interne Inhalt dehnt sie immer aus
Beim Erstellen einer Tabellenseite ist die für td festgelegte Breite manchmal ungültig. Die Breite von td wird immer durch den internen Inhalt erweitert. Sie können die Polsterung festlegen, aber die direkte Festlegung der Breite ist ungültig. Sehen wir uns dieses Beispiel genauer an:

Code kopieren
Der Code lautet wie folgt:

<div>
<Tabellengrenze="1px">
<tr>
<td width="100px" style="width: 100px !important;">1000800</td>
<td>1000000</td>
<td>1000000</td>
</tr>
<tr>
<td>1000000</td>
<td>10000300</td>
<td>1000000</td>
</tr>
</Tabelle>
</div>
<Tabellengrenze="1px">
<tr>
<td Breite="100px">1000000</td>
<td>1000000</td>
<td>1000000</td>
</tr>
<tr>
<td>1000000</td>
<td>10000300</td>
<td>1000000</td>
</tr>
</Tabelle>
* {Rand: 0; Polsterung: 0;}
.div1 {Position: relativ; Breite: 150px; Höhe: 100px; Überlauf: Scrollen; Rahmen: 1px durchgehend rot;}


Wir können sehen, dass die Breite der ersten Zelle in der Klasse div1 zwar festgelegt, aber ungültig ist. Der Zellinhalt wird immer durch den Inhalt bestimmt. Da er durch den Inhalt bestimmt wird, sollten wir einen Weg finden, den „Inhalt“ die Zelle erweitern zu lassen. Das ist alles.

Wir können ein Div in td hinzufügen und die Breite des Div festlegen. Probieren wir es aus:

Ändern Sie einen Teil des Codes in der Klasse div1:

Code kopieren
Der Code lautet wie folgt:

<td width="100px" style="width: 100px !important;">1000800</td>

Geändert zu

Code kopieren
Der Code lautet wie folgt:

<td><div>1000800</div></td>

Schreiben Sie dann im Stil:

Code kopieren
Der Code lautet wie folgt:

td div {
Breite: 100px;
}

Aktualisieren Sie die Seite. Der Effekt ist wie folgt:

Wir können sehen, dass die Breite der Zellen in der Klasse div1 wirksam geworden ist.

<<:  So erstellen Sie eine TAR-Datei von WSL über Docker

>>:  Welche Bilddateiformate gibt es und wie wählt man sie aus?

Artikel empfehlen

Zwei Möglichkeiten zur Installation von Python3 auf Linux-Servern

Erste Methode Alibaba Cloud- und Baidu Cloud-Serv...

Detaillierte Erklärung zum Einfügen gängiger Nginx-Befehle in Shell-Skripte

1. Erstellen Sie einen Ordner zum Speichern von N...

Beispielcode für das MySQL-Indexprinzip ganz links

Vorwort Ich habe kürzlich etwas über MySQL-Indize...

js realisiert die Funktion zum Klicken zum Wechseln der Karte

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung häufig verwendeter CSS-Stile (Layout)

Kompatibel mit neuen CSS3-Eigenschaften In CSS3 k...

Analyse des Quellcodes des React-Ereignismechanismus

Inhaltsverzeichnis Prinzip Quellcodeanalyse Deleg...

So gehen Sie mit vergessenen Passwörtern in Windows Server 2008 R2 um

Was tun, wenn Sie Windows Server 2008R2 vergessen...

Einige „Fallstricke“ beim Upgrade der MySQL-Datenbank

Bei kommerziellen Datenbanken hat die Datenbankak...

Detaillierte Erläuterung zum Einrichten des Ressourcencaches in Nginx

Ich wollte schon immer etwas über Caching lernen....