Wie verhindert man die Erweiterung von Tabellenzellen aufgrund von langem Text?

So verhindern Sie die Erweiterung von Tabellenzellen trotz Textlänge

In einem typischen Tabellenlayout passt sich die Breite einer Spalte an die Länge ihrer längsten Zelle an. Wenn Sie jedoch unabhängig vom Text in den Zellen eine feste Spaltenbreite wünschen, befolgen Sie diese Schritte:

Lösung:

1. Definieren Sie die Zellenbreite mithilfe von CSS : Geben Sie die Breite (z. B. 100 Pixel) für die Elemente th und td innerhalb der Tabellendefinition an.
2. Setzen Sie das Tabellenlayout auf behoben: Diese Eigenschaft stellt sicher, dass die Tabellenbreite konstant bleibt und verhindert so eine Spaltenerweiterung. Um die Abmessungen der Tabelle vollständig zu steuern, legen Sie eine Breite für die Tabelle selbst fest (z. B. Breite: 200 Pixel).
3. Textbeschneidung aktivieren (optional): Um zu verhindern, dass Text außerhalb der Zelle überläuft, fügen Sie „overflow: versteckt“ hinzu Zelle Definitionen.

Beispiel:

table {
  table-layout: fixed;
  width: 200px;
}

th,
td {
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Durch die Einhaltung dieser Schritte können Sie sicherstellen, dass die Tabellenspaltenbreiten unabhängig von der fest bleiben Textlänge in seinen Zellen. Dieser Ansatz gibt Ihnen eine bessere Kontrolle über die Tabellendarstellung und verhindert unerwünschte Spaltenerweiterungen, die Ihr Layout stören könnten.

Das obige ist der detaillierte Inhalt vonWie verhindert man die Erweiterung von Tabellenzellen aufgrund von langem Text?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!