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    

Artikel empfehlen

Implementierung der IP-Adresskonfiguration in Centos7.5

1. Bevor Sie die IP-Adresse konfigurieren, verwen...

Linux verwendet iftop, um den Netzwerkkartenverkehr in Echtzeit zu überwachen

Linux verwendet iftop, um den Verkehr der Netzwer...

Tutorial zur Installation von MySQL8 auf Centos7

Neue Funktionen in MySQL 8: Meine persönliche Mei...

Diskussion über Web-Nachahmung und Plagiat

Einige Monate nachdem ich 2005 in die Branche eing...

Mit wie vielen Pixeln sollte eine Webseite gestaltet werden?

Viele Webdesigner sind beim Entwurf des Webseitenl...

Vue-Plugin-Fehler: Auf dieser Seite wurde Vue.js erkannt. Problem gelöst

Das Vue-Plugin meldet einen Fehler: Vue.js wurde ...

Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten

Das img-Tag in XHTML ist ein sogenanntes selbstsc...

Verwenden Sie js in html, um die lokale Systemzeit abzurufen

Code kopieren Der Code lautet wie folgt: <div ...

Unterschiede zwischen MySQL CHAR und VARCHAR beim Speichern und Lesen

Einführung Kennen Sie wirklich den Unterschied zw...

CentOS 7.2 erstellt einen Nginx-Webserver zum Bereitstellen des Uniapp-Projekts

Panther begann als Anfänger und ich bin immer noc...

Nginx Reverse Proxy Springboot JAR-Paket-Prozessanalyse

Die übliche Methode zum Bereitstellen eines Sprin...

Spezifische Verwendung von Nginx Keepalive

Der Standardanforderungsheader des http1.1-Protok...