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

Eine kurze Erläuterung, wann MySQL interne temporäre Tabellen verwendet

Gewerkschaftsexekution Verwenden Sie zur Vereinfa...

Anleitung zur Verwendung von env in vue cli

Inhaltsverzeichnis Vorwort Einführung-Offiziell B...

Detaillierte Anwendungsfälle von MySql Escape

MySQL-Escape Escape bedeutet die ursprüngliche Se...

vue-cli4.5.x erstellt schnell ein Projekt

1. Installieren Sie vue-cli npm ich @vue/cli -g 2...

Bei der Verwendung von MySQL aufgetretene Probleme

Hier sind einige Probleme, die bei der Verwendung...

Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

Dieser Artikel stellt einige Aspekte von HTML-Tag...

CSS3 implementiert den Beispielcode der NES-Spielekonsole

Ergebnisse erzielenImplementierungscode html <...

Fallstudie zu JavaScript-Style-Objekten und CurrentStyle-Objekten

1. Stilobjekt Das Stilobjekt stellt eine einzelne...

Detaillierte Erklärung von Cgroup, dem Kernprinzip von Docker

Das leistungsstarke Tool cgroup im Kernel kann ni...

CSS3-Übergang zum Erreichen des unterstrichenen Beispielcodes

In diesem Artikel wird der Beispielcode für den C...

Einführung in die Verwendung von CSS3-Farbwerten (RGBA) und Farbverlaufsfarben

Vor CSS3 konnten Verlaufsbilder nur als Hintergru...

So stellen Sie MySQL- und Redis-Dienste mit Docker bereit

Inhaltsverzeichnis So stellen Sie den MySQL-Diens...

Designtheorie: Menschenorientiertes Designkonzept

<br />Als sich das Denken in Ost und West sp...