Detaillierte Erklärung einiger Einstellungen für Tabellenanpassung und Überlauf

1. Zwei Eigenschaften des Tabellen-Resets:

①border-collapse: collapse; /* Legen Sie das Zusammenführungsrahmenmodell für die Tabelle fest*/

②border-spacing: 0; /* Setzt den Abstand zwischen den Zellen in der Tabelle auf 0 */

Code:

<div Klasse="fz">
    <div Stil="Breite: 600px;" Klasse="bg-grey p10">
        <Tabelle Klasse="bg-white">
            <tr>
                <th>Seriennummer</th>
                <th>Startzeit</th>
                <th>Endzeit</th>
                <th>Bemerkungen</th>
                <th>Betrieb</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2.8.2014</td>
                <td>1.1.2015</td>
                <td>Wo ist die Zeit geblieben?</td>
                <td><a href="#">Bearbeiten</a></td>
            </tr>
        </Tabelle>
    </div>
</div>

Wenn nur td zurückgesetzt wird, hat th{padding:0} keinen Effekt beim Setzen von Grenzen

Die Auswirkung der Einstellung td{ border:1px solid #ff4136;}

Die Auswirkung der Tabelleneinstellung { border-collapse: collapse; border-spacing: 0; }

2. Einzeilige Überlaufpunktanzeige

.ell { Textüberlauf: Auslassungspunkte; Leerzeichen: nowrap; Überlauf: ausgeblendet; }

Einige notwendige Voraussetzungen sind:

① Achten Sie darauf, die Breite des Elements festzulegen.

②white-space: nowrap; Das white-space-Attribut legt fest, wie mit den Leerzeichen innerhalb eines Elements umgegangen wird. Nowrap-Text wird nicht umbrochen. Der Text wird in derselben Zeile fortgesetzt, bis ein <br>-Tag gefunden wird. (Verhindert, dass sich der Text nach unten streckt; selbst wenn Sie eine Höhe definieren, werden die Auslassungspunkte nicht angezeigt und der überschüssige Text wird abgeschnitten.)

③Überlauf: ausgeblendet; (um die horizontale Ausdehnung des Textes zu verhindern)

④Textüberlauf: Auslassungspunkte; Auslassungspunkte zeigen ein Auslassungszeichen an, wenn der Text im Objekt überläuft (...)

3. Einstellen der Breite der Tabelle

td{ border:1px solid #ff4136;}
.Titel {Breite: 100px;}
.kaiyao{ Breite: 200px;}
.Zeit{ Breite: 120px;}

<div Klasse="fz">
    <div Stil="Breite: 800px;" Klasse="bg-grey p10">
        <Tabelle Klasse="bg-white pctW">
            <tr>
                <th class="title">Titel</th>
                Zusammenfassung
                <th class="time">Zeit</th>
            </tr>
            <tr>
                <td>Einzeilige Punkt-Punkt-Anzeige</td>
                <td>Es heißt, dass Chrome 34+ responsive Bilder unterstützt, was bedeutet, dass Sie durch die Verwendung bestimmter Attribute im <img>-Tag eine automatische responsive Bilderfassung erreichen können. Sie können es ausprobieren~</td>
                <td>09.04.2014 23:51</td>
            </tr>
            <tr>
                <td>Kontinuierlicher Zeichenumbruch</td>
                <td>Dies ist das erste Mal, dass ich eine Stadt in Peking besuche</td>
                <td>09.04.2014 23:53</td>
            </tr>
        </Tabelle>
    </div>
</div>

Wirkung der Operation:

Problem: Obwohl die Breite von td festgelegt ist, läuft der Text aufgrund der Fließfähigkeit der Zelle nicht über. Und die Breite der Tabelle wird automatisch entsprechend dem Zellinhalt berechnet.

Lösung: Hinzufügen

Tabelle{ Tabellenlayout: behoben;}

Wirkung:

Der Zweck von table-layout: fixed besteht darin, das Tabellenlayout zu fixieren.

Problem: Chinesisch läuft nicht über, Englisch aber? Die für die Tabelle eingestellte Breite funktioniert immer noch nicht?

Lösung: Fügen Sie den beiden Zellen von „Outline“ die Stile .ell und .bk hinzu.

.cell_bk { Anzeige: Tabelle; Breite: 100 %; Tabellenlayout: fest; Zeilenumbruch: Wortumbruch; }
.bk { Zeilenumbruch: Wortumbruch; }

Wirkung der Operation:

Problem: Die eingestellte Breite der Tabelle funktioniert immer noch nicht? . Nach der Berechnung wird, wenn die Breite jedes td festgelegt ist, die tatsächliche Breite der Zelle als Anteil der Tabellenbreite berechnet.

Beispiel: Die Breite der Tabelle beträgt 800 Pixel. Die Breite von td beträgt jeweils 100px, 200px, 100px. Im Falle von table-layout:fixed. Das ist ein Verhältnis von 1:2:1 von 800

Die tatsächliche td-Breite beträgt: 200px, 400px, 200px. Wenn Sie nicht anteilig rechnen möchten, können Sie folgende Lösung nutzen:

Lösung: Löschen Sie die Breitenbegrenzungsklasse „.time“, auf die in der letzten Zelle der Tabelle verwiesen wird.

Wirkung:

Die Breiten von „Titel“ und „Zusammenfassung“ sind auf 100px und 200px eingestellt;

Zusammenfassen:

(1) Um die Breite einer Tabelle festzulegen, muss das Attribut „table-layout: fixed“ hinzugefügt werden. Ohne dieses Attribut funktionieren .ell und .bk nicht, selbst wenn die Zellenbreite festgelegt ist.

(2) Nach dem Hinzufügen des Attributs table-layout: fixed wird die Breite der Zelle als Prozentsatz ausgedrückt. ②Wenn die Zellenbreite in px ausgedrückt wird, legen Sie nicht die Breite der letzten Zelle fest.

4. Doppelspaltiger adaptiver Zellteil, fortlaufender Zeilenumbruch für englische Zeichen

/*Kontinuierlicher Zeilenumbruch englischer Zeichen in doppelspaltiger adaptiver Zelle*/
.cell_bk { Anzeige: Tabelle; Breite: 100 %; Tabellenlayout: fest; Zeilenumbruch: Wortumbruch; }

Beachten Sie, dass sich dies vom normalen Schweben unterscheidet. Das Schweben ist umlaufend, während dies zweispaltig ist.

Code:

.cell{ Anzeige: Tabellenzelle; *Anzeige: Inline-Block;}

<div Klasse="fz">
    <div Stil="Breite: 600px;" Klasse="bg-grey p10">
        <div>
            <img src="bilder/xxx.jpg" Klasse="l p10" Breite="100">
            <div Klasse="Zelle">
                <p Klasse="Zelle_bk">
                    An diesem Tag im Jahr 1977 betraten der 28-jährige Lazio-Mittelfeldspieler Luciano Re Cecconi und zwei Freunde ein Juweliergeschäft in Rom. Aus irgendeinem Grund wollte er plötzlich einen Scherz machen. Als er das Juweliergeschäft betrat, schrie er: „Keine Bewegung! Raub!“ Seine nächsten und letzten Worte, nachdem der Juwelier herausgestürzt war und ihn erschoss, waren: „Das ist ein Witz! Das ist ein Witz!“ Dreißig Minuten später war er tot.
                    <br/><br/>
                    <span>//zxx:Ich bin xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
                    <h3>Keine Verarbeitung</h3>
                </p>
            </div>
        </div>
    </div>
</div>

Wirkung: (kompatibel mit allen Browsern)

Der Effekt, wenn die Breite des Bildes img auf 200 eingestellt wird

Hinweis: Es werden nur zwei Spalten unterstützt. Bei der Verwendung von drei Spalten treten bei den Browsern IE6/7 Probleme auf.

Im Vergleich zu Float kann ein zweispaltiger Effekt erzielt werden, es ist jedoch nicht adaptiv, wenn sich die Bildbreite ändert. Sie müssen gleichzeitig den Padding-Left-Wert des rechten Div ändern.

<img src="bilder/xxx.jpg" Klasse="l p10" Breite="200">
      <div Stil="padding-left: 220px;">
              <p Klasse="Zelle_bk"> 

Damit ist dieser Artikel über einige detaillierte Einstellungen für Tabellenanpassung und -überlauf abgeschlossen. Weitere relevante Inhalte zu Tabellenanpassung und -überlauf finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!