Wie schneide ich Tabellenzellen gleichmäßig ab, wenn ein Inhaltsüberlauf auftritt?

Gleichmäßiges Abschneiden von Tabellenzellen

Fred, ein Tisch mit schwankender Wohnfläche, steht vor der Herausforderung, unterschiedliche Inhalte in seine Zellen einzupassen. Bei übermäßigem Inhalt greift Fred darauf zurück, den Inhalt einer Zelle abzuschneiden, um zu verhindern, dass die Tabelle über die Breite hinausläuft. Er vermutet jedoch, dass es eine bessere Lösung geben könnte, bei der alle Zellen gleichermaßen zur Inhaltskürzung beitragen.

Um Freds Bedenken auszuräumen, kann der folgende Ansatz verwendet werden:

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">
        This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.
        </td>
        <td style="white-space: nowrap;">
            Less content here.
        </td>
    </tr>
</table>

In dieser Lösung:

• Das colgroup-Element wird eingeführt, um zwei Spalten anzugeben: eine mit einer Breite von 100 %, die den größten Teil der Tabellenbreite einnimmt, und eine mit einer Breite von 0 %, die als flexible Zelle fungiert.
• Die erste Zelle hat den Stil „white-space:nowrap“, um Zeilenumbrüche zu verhindern, „text-overflow: ellipsis“, um den Inhalt abzuschneiden, und „overflow: hide“, um den zusätzlichen Inhalt auszublenden.
• Die max -width: 1px-Stil auf der ersten Zelle stellt sicher, dass sie nur so viel Breite wie nötig einnimmt und den verbleibenden Platz für die zweite Zelle lässt.
• Die zweite Zelle verwendet White-Space: Nowrap, um ihr Original beizubehalten Breite.

Dieser Ansatz stellt sicher, dass bei ausreichend Platz alle Zellen ihren vollständigen Inhalt anzeigen. Wenn jedoch nicht genügend Platz vorhanden ist, wird der Inhalt der ersten Zelle zuerst abgeschnitten, wodurch die zweite Zelle zusätzlichen Platz für die Anzeige ihres Inhalts erhält.

Das obige ist der detaillierte Inhalt vonWie schneide ich Tabellenzellen gleichmäßig ab, wenn ein Inhaltsüberlauf auftritt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!