TD bei der Webseitenproduktion kann auch über die versteckte Anzeige hinauslaufen

Wenn ich diesen Artikel so nenne, wird vielleicht jemand fragen: Warum achtest du immer noch auf Tabellen? Sie sind schon veraltet... Beeil dich und verwende Xhtml... div ist gut... ul ist gut... ol ist gut... dl ist gut... Das ist alles, ich weiß nicht, was sonst noch gut ist.

Sind Tabellen wirklich veraltet? Verstehen Sie Tabellen wirklich? Wissen Sie wirklich, wie man Tabellen verwendet?

Wir sind nicht hier, um uns an Wortgefechten zu beteiligen; das überlassen wir denen, die genügend Zeit haben.

Kommen wir zurück zum Punkt:

Ich weiß nicht mehr, wann das war, aber jemand hat mich gefragt, warum beim Verwenden einer Tabelle zum Simulieren von DataGrid der Text in td, der die feste Breite überschreitet, nicht ausgeblendet werden kann, sondern direkt umbrochen wird?

Ja, das stimmt, wie in folgendem Dokument gezeigt:

Tipp: Sie können einen Teil des Codes vor dem Ausführen ändern

Führen Sie den obigen Code aus und Sie werden feststellen, dass der Text in der Zelle, der die feste Breite überschreitet, nicht ausgeblendet, sondern in einer neuen Zeile angezeigt wird. Das ist offensichtlich nicht meine Absicht.

Dies scheint eine Funktion von table zu sein. Die Kombination von {width:*px;white-space:nowrap;overflow:hidden;} wird nicht gut unterstützt. Letztendlich funktioniert white-space:nowrap nicht, daher scheint overflow:hidden ungültig zu sein. {Hinweis: Dies funktioniert, wenn es sich um eine Reihe bedeutungsloser Zeichen handelt, zum Beispiel: <td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>, dann ist {white-space:nowrap} nicht erforderlich, um die Anzeige in einer Zeile zu erzwingen, weil diese Reihe von a's als ein Wort betrachtet und nicht umbrochen wird, sodass die a's, die die Breite von .col1 überschreiten, ausgeblendet werden}

[Lösung 1:]

Später erwähnte jemand, dass die Verwendung der prozentualen Breite in Ordnung wäre. Nach dem Testen funktioniert es wirklich. Ändern Sie den Stil einiger Zeilen im ersten Absatz leicht und lassen Sie die anderen unverändert:

.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

Nach dem Ausführen des geänderten Codes werden Sie feststellen, dass der Text, der die Breite überschreitet, tatsächlich ausgeblendet ist und der gewünschte Effekt erzielt zu sein scheint.

Tatsächlich kann die Verwendung einer prozentualen Breite das Problem des Ausblendens von Text lösen, aber das scheint nicht die beste Lösung zu sein, weil wir manchmal eine feste Breite statt einer prozentualen Breite benötigen.

Die Wurzel all dessen liegt in der Frage, wie der Text in der Zelle in einer Zeile ohne Umbruch angezeigt werden kann.

[Lösung 2:]

Um diese Anforderung zu erfüllen, können wir neben der Verwendung von Stilen auch an ein Tag denken, das lange nicht mehr verwendet wurde . Die Funktion dieses Elements besteht darin, die Anzeige des Inhalts in einer Zeile zu erzwingen. Der obige Code wird wie folgt geändert, der Rest bleibt unverändert:

<table border="1" cellspacing="0" summary="Rückblick auf Tabelle: TD verwendet auch overflow:hidden">
<tr>
<td class="col1">Shenzhou Elegant Q400N</td>
<td class="col2">Elegantes Q400N, mit Intel Core2 Duo (Merom) T5450 (1,66 G) Prozessor</td>
<td class="col3">Centrino 4-Plattform, hervorragendes Preis-Leistungs-Verhältnis, schönes Erscheinungsbild</td>
</tr>
</Tabelle>

Nachdem Sie diese Änderung vorgenommen haben, werden Sie feststellen, dass der Effekt tatsächlich erzielt wird. Sollten Sie nicht aufgeregt sein? Nein, das scheint nicht die beste Lösung zu sein, denn es verwendet schließlich ein Element-Tag, das schon lange nicht mehr verwendet wurde und nicht empfohlen wird, was bei den Leuten ein etwas unangenehmes Gefühl hervorruft.

Diesem Gedankengang folgend betrachtete ich das Problem aus einem anderen Blickwinkel und kam zu dem Schluss, dass es leicht zu lösen war.

Da wir in einer Zelle mit fester Breite nicht einfach white-space:nowrap zu th und td hinzufügen können, wie wäre es, der Zelle mit fester Breite ein Markierungselement hinzuzufügen?

Bewährte Methoden:

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::

Tipp: Sie können einen Teil des Codes vor dem Ausführen ändern

Wenn Sie den obigen Code ausführen, werden Sie feststellen, dass dieser Ansatz durchführbar ist und im Hinblick auf Code-Einfachheit, Lesbarkeit und Rationalität besser ist als die vorherigen Lösungen.

{Wer noch nicht versucht hat, den Inhalt von Zellen auszublenden, die eine feste Breite überschreiten, kann zunächst auf seinem Computer damit herumspielen und dann diesen Artikel lesen.}

Tatsächlich ist Tisch eine interessante und sehr spielbare Sache. Wir sollten es nicht durch eine getönte Brille betrachten, denn es hat seine Daseinsberechtigung.

Ich werde weiterhin einige Artikel über Tabellen schreiben, auch zu meiner eigenen Unterhaltung.

<<: So stellen Sie das umfassende Benutzererlebnis sicher

>>: Grundlegendes Tutorial zur Verwendung der Explain-Anweisung in MySQL

Das Erlebnis gestalten: Was auf dem Knopf liegt

TD bei der Webseitenproduktion kann auch über die versteckte Anzeige hinauslaufen

Das Erlebnis gestalten: Was auf dem Knopf liegt

Eine kurze Einführung in die MySQL-Speicher-Engine

Lösen Sie das Problem des Docker-Pull-Image-Fehlers

LINUX Prüft, ob der Port belegt ist

React Native realisiert den Auf- und Ab-Pull-Effekt der Überwachungsgeste

CSS3-Kategoriemenüeffekt

So installieren Sie den Elasticsearch7.6-Cluster im Docker und legen ein Kennwort fest

vue.js Router verschachtelte Routen

Eine kurze Diskussion über das Implementierungsprinzip von Webpack4-Plugins

Detaillierte Erläuterung der Rolle von overflow:hidden (Überlauf verbergen, Floats löschen, Randkollaps beheben)

Artikel empfehlen

Mehrere allgemeine Beispielcodes für Weiterleitungsverbindungen in HTML

Beinhaltet der %-Wert im neu erstellten MySQL-Benutzer localhost?

Einführung in die CSS-Technologie zur automatischen Farbanpassung von Vordergrund und Hintergrund (Demo)

Mehrere Möglichkeiten zum einfachen Durchlaufen von Objekteigenschaften in JS

So erlauben Sie allen Hosts den Zugriff auf MySQL

Zeitleistenimplementierungsmethode basierend auf ccs3

Einige Parameterbeschreibungen von Texteingabefeldern im Webdesign

Detailliertes Tutorial zur Installation von Docker auf CentOS 7.5

Erläuterung der Vorsichtsmaßnahmen für die Mysql-Master-Slave-Replikation

Umfassende Analyse der Isolationsebenen in MySQL

Detaillierte Erläuterung des Prozesses der Verwendung von GPU in Docker

MySQL Dual-Machine Hot-Standby-Implementierungslösung [testbar]

JavaScript-Timer zur Realisierung einer zeitlich begrenzten Flash-Sale-Funktion

So legen Sie das Root-Passwort des Benutzers und die Remote-Verbindungsmethode für die Alibaba Cloud ECS-Instanz fest

Detaillierte Erläuterung mehrerer Methoden zur Reduzierung der JS-Array-Dimensionalität