Wie kann das Abschneiden von Tabellenzellen behoben werden, während die Zellenbreiten konsistent bleiben und die Inhaltsanzeige maximiert wird?

Auflösen von Tabellenzellenkürzungen bei gleichzeitiger Maximierung der Inhaltsanzeige

Im Bereich des Tabellenlayouts tritt das Problem der Zellenkürzung auf, wenn der Inhalt einer Zelle größer ist seine vorgesehene Breite. Eine einfache Lösung besteht darin, den Inhalt abzuschneiden und durch Auslassungspunkte (...) anzuzeigen, dass nicht die vollständigen Informationen sichtbar sind. Dieser Ansatz kann jedoch zu ungleichmäßigen Zellenbreiten führen, sodass einige Zellen übermäßig viel Leerraum haben.

Um dieser Herausforderung zu begegnen, können wir eine Technik anwenden, die sicherstellt, dass Zellen erst dann gleichmäßig überlaufen, wenn sie ihren verfügbaren Leerraum erschöpft haben.

Codelösung:

Der folgende Codeausschnitt veranschaulicht diesen Ansatz:

<code class="html"><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></code>

Erklärung:

1. Spaltengruppe (colgroup):

   • Wir definieren zwei Spalten mit , wobei die erste Spalte 100 % Breite einnimmt und die zweite Spalte mit 0 % Breite. Dadurch können wir die Breite der beiden Zellen steuern.

2. Tabellenzellenstile:

   • Die Die erste Zelle hat die folgenden Stilattribute:

     • white-space: nowrap: Verhindert, dass der Inhalt auf mehrere Zeilen umgebrochen wird
     • text-overflow:ellipsis: Schneidet den Inhalt mit Auslassungspunkten ab
     • Überlauf: versteckt: Versteckt den überlaufenden Inhalt
     • max-width:1px: Stellt eine minimale Anfangsbreite für die Zelle bereit, um sicherzustellen, dass sie nicht vollständig zusammenbricht

3. Zweite Tabellenzelle:

   • Die zweite Zelle enthält Leerzeichen: nowrap, wodurch ein Umbrechen des Inhalts verhindert und sichergestellt wird, dass die zweite Spalte respektiert seine Breite von 0 %.

Indem Sie die maximale Breite der ersten Spalte auf 1 Pixel festlegen, wird sie zum „schwächsten“ Punkt in der Tabelle. Wenn die Tabelle horizontal schrumpft, überschreitet die erste Zelle diesen Breitenschwellenwert und beginnt mit der Kürzung, um den schrumpfenden Platz auszugleichen, ohne dass sich dies auf die Breite der Spalte der zweiten Zelle auswirkt.

Ergebnis:

Dieser Ansatz bietet die folgenden Vorteile:

• Zellen überlaufen gleichmäßig, was zu konsistenten Breiten führt.
• Zellen werden erst dann abgeschnitten, wenn ihr gesamter Leerraum aufgebraucht ist.
• Die Der Inhalt der zweiten Zelle bleibt auch dann erhalten, wenn die Tabelle erheblich verkleinert wird.

Das obige ist der detaillierte Inhalt vonWie kann das Abschneiden von Tabellenzellen behoben werden, während die Zellenbreiten konsistent bleiben und die Inhaltsanzeige maximiert wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!