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

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:

<style type="text/css"> Tabelle {width:500px;table-layout:fixed;} .col1 {width:100px;} .col2 {width:200px;} .col3 {width:200px;} td {white-space:nowrap;overflow:hidden;} </style> <table border="1" cellpacing="0" summary="Schauen Sie sich die Tabelle noch einmal an: TD spielt auch overflow:hidden"> <tr> <td class="col1">Shenzhou Elegant Q400N</td> <td class="col2">Eleganter Q400N mit Intel Core2 Duo(Merom) T5450(1,66G) Prozessor</td> <td class="col3">Centrino 4-Plattform, hervorragendes Preis-Leistungs-Verhältnis, schönes Erscheinungsbild</td> </tr> </table>

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:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="Content-Language" content="gb2312"> <title></title>

Shenzhou Elegant Q400N

Centrino 4-Plattform, hervorragend Tolles Preis-Leistungs-Verhältnis, schönes Aussehen