Heim  >  Artikel  >  Web-Frontend  >  Wie verwende ich Prozentsätze für Spalten mit variabler Breite in Tabellen mit Spalten mit fester Breite?

Wie verwende ich Prozentsätze für Spalten mit variabler Breite in Tabellen mit Spalten mit fester Breite?

Susan Sarandon
Susan SarandonOriginal
2024-11-16 02:59:03895Durchsuche

How to Use Percentages for Variable Width Columns in Tables with Fixed Width Columns?

Verwenden von calc() mit Tabellen: Eine alternative Lösung

Wenn Sie versuchen, Tabellenspalten mit fester und variabler Breite mithilfe der Funktion calc() zu implementieren, kann dies der Fall sein auf Einschränkungen stoßen. In Tabellen unterstützt die Funktion calc() keine Prozentsätze für Breitenberechnungen.

Um diese Herausforderung zu meistern, sollten Sie einen anderen Ansatz in Betracht ziehen:

  1. Legen Sie das Tabellenlayout fest attribute: Erzwingen Sie, dass die Spalten bestimmte Breiten einhalten, indem Sie die Eigenschaft table-layout für die Tabelle auf „fixed“ setzen. Weisen Sie der Tabelle außerdem eine Breite von 100 % zu.
  2. Entfernen Sie calc() und verwenden Sie Prozentsätze: Verwenden Sie anstelle von calc() einfache Prozentsätze für die verbleibenden Spalten. Bestimmen Sie die Spalten mit fester Breite und weisen Sie deren Breite zu. Der verbleibende Platz wird proportional auf die Spalten mit relativer Breite verteilt.

Beispiel-CSS:

td.title, td.interpret {
    width: 40%;
}

td.album {
    width: 20%;
}

Wichtige Punkte:

  • Das Festlegen des Tabellenlayouts auf „fest“ stellt sicher, dass die Spaltenbreiten den angegebenen Werten entsprechen.
  • Durch die Verwendung von Prozentsätzen für Spalten mit relativer Breite kann der verbleibende Platz proportional verteilt werden.
  • Display:table ist erforderlich, damit das Tabellenlayout funktioniert, verhindert jedoch die Verwendung der Höhe für die Tabelle.

Geänderter Beispielcode:

<table border="0">

Das obige ist der detaillierte Inhalt vonWie verwende ich Prozentsätze für Spalten mit variabler Breite in Tabellen mit Spalten mit fester Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn