Heim Web-Frontend HTML-Tutorial Das TD für die Webseitenproduktion kann auch überlaufen und die Seitenproduktion display_HTML/Xhtml_Web ausblenden

Das TD für die Webseitenproduktion kann auch überlaufen und die Seitenproduktion display_HTML/Xhtml_Web ausblenden

May 16, 2016 pm 04:42 PM

Sobald ich diesem Artikel einen solchen Namen gebe, wird sich vielleicht jemand fragen: Warum achten Sie immer noch auf Tabelle? Es ist bereits veraltet ... Beeilen Sie sich, Xhtml ... div ist gut ... ul ist gut. .. ol ist gut... dl ist gut... es ist vorbei, nein. Es ist besser zu wissen, was sonst noch passiert.

Ist die Tabelle wirklich veraltet? Verstehst du Tisch wirklich? Wissen Sie wirklich, wie man Tabellen verwendet?

Wortgefechte sind nicht das, was wir tun wollen, überlassen Sie es denen, die viel Zeit haben.

Zurück zum Thema:

Ich kann mich nicht erinnern, wann jemand eine Tabelle zur Simulation des DataGrid verwendet und gefragt hat, warum der Text im td, der die feste Breite überschreitet, nicht ausgeblendet werden kann, aber wird direkt wickeln?

Ja, das ist tatsächlich der Fall, wie zum Beispiel:



Tipp: Sie können einen Teil des Codes ändern, bevor Sie ausführen
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. Dies ist offensichtlich nicht meine Absicht.

Es scheint, dass dies eine Funktion der Tabelle ist. Sie kann die Kombination von {width:*px;white-space:nowrap;overflow:hidden;} nicht gut unterstützen -space: nowrap funktioniert nicht, daher scheint overflow:hidden ungültig zu sein. {Hinweis: Wenn es sich um eine Reihe bedeutungsloser Zeichen handelt, kann es zum Beispiel wirksam werden: & lt; also werden a's, die die Breite von .col1 überschreiten, ausgeblendet}

 [Lösung 1:]

Später wird erwähnt, dass die Verwendung der prozentualen Breite ausreicht. Nach dem Testen ist dies tatsächlich möglich. Ä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%;}

Nachdem Sie den geänderten Code ausgeführt haben, werden Sie feststellen, dass der Text, der die Breite überschreitet, tatsächlich ausgeblendet ist. Der Effekt scheint erzielt zu werden.

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

Der Grund dafür ist, wie man den Text in der Zelle in einer Zeile ohne Umbruch anzeigt.

 [Lösung 2:]

Um diese Anforderung zu erfüllen, können wir uns neben der Verwendung von Stilen auch ein Tag vorstellen, das schon lange nicht mehr verwendet wird Die Funktion dieses Elements besteht darin, die Anzeige des Inhalts in einer Zeile zu erzwingen. Nehmen Sie die folgenden Änderungen am obigen Code vor und lassen Sie alles andere unverändert:



;nobr> ; Eleganter Q400N, mit Intel Core2 Duo (Merom) T5450 (1,66G) Prozessor
tatsächlich erreicht, ist es Zeit, aufgeregt zu sein? Nein, das scheint nicht die beste Lösung zu sein, denn schließlich ist es etwas unangenehm, ein Element-Tag zu verwenden, das schon lange nicht mehr verwendet wurde und nicht empfohlen wird.

Dieser Idee folgend betrachtete ich dieses Problem aus einem anderen Blickwinkel und stellte fest, dass das Problem 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, was wäre, wenn wir der Zelle mit fester Breite ein Markierungselement hinzufügen würden?

Beste Lösung:



提示:您可以先修改部分代码再运行

  运行上面的代码,会发现这样的做法是可以的,而且从代码的简洁性、可读性和合理性几方面来说,都较前几种方案为好。

  {还没有做过给单元格隐藏超过固定宽度内容的同学,可先在机器上玩玩,然后再来看本文}

  其实table是一个有趣,可玩性很高东东。我们不应该带着有色眼睛去看它,因为它有它存在的道理。

  之后会继续写一些关于table的文章,也作自娱之用。
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Mar 04, 2025 pm 12:32 PM

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Mar 04, 2025 pm 02:39 PM

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Was ist der Zweck des & lt; datalist & gt; Element?

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Was ist der Zweck des & lt; Fortschritts & gt; Element?

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Was ist der Zweck des & lt; Meter & gt; Element?

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Mar 12, 2025 pm 04:05 PM

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?

See all articles
Shenzhou Elegant Q400N Centrino 4-Plattform, hervorragend Tolles Preis-Leistungs-Verhältnis, schönes Aussehen