Wie verhindert man die Erweiterung der Spaltenbreite in HTML-Tabellen?

Erweiterung der Spaltenbreite in Tabellen verhindern

Viele Entwickler stehen bei der Arbeit mit Tabellen oft vor einer Herausforderung: sicherzustellen, dass die Breite einer Spalte konstant bleibt , unabhängig von der Länge des Textes in seinen Zellen. In diesem Artikel gehen wir auf dieses Problem ein und bieten eine Lösung zum Festlegen der Spaltenbreite bei gleichzeitiger Deaktivierung jeglicher Erweiterung.

Verstehen des Problems

Standardmäßig, wenn der Text größer ist Wenn die angegebene Breite einer Tabellenzelle erreicht ist, wird die enthaltende Spalte erweitert, um den Überlauf aufzunehmen. Dieses Verhalten widerspricht der gewünschten Konsistenz der Spaltenbreiten.

Lösung: Stabilität der Spaltenbreite

Für die Behebung dieses Problems sind zwei CSS-Eigenschaften entscheidend:

• Tabellenlayout: behoben: Diese Eigenschaft setzt den Tabellenlayoutmodus auf „Fest“, um sicherzustellen, dass die Spaltenbreiten unabhängig von der Zelle konsistent bleiben Inhalt.
• width: Diese Eigenschaft legt die explizite Breite der Spalte fest.

Implementierung dieser Eigenschaften zusammen mit dem richtigen CSS-Stil für Rahmen und Tabellenbreite, erreicht das Gewollte Verhalten:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

Beispiel:

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

Dieser Code behält eine Spaltenbreite von 100 Pixel für beide Spalten bei, auch wenn der Text in der zweiten Kopfzeilenzelle ist deutlich länger. Die overflow:hidden-Eigenschaft verbirgt jeglichen überschüssigen Text, der andernfalls über die Zellgrenze hinausragen würde.

Das obige ist der detaillierte Inhalt vonWie verhindert man die Erweiterung der Spaltenbreite in HTML-Tabellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!