Wie erreicht man mit CSS Calc() und Table-Layout flexible Spaltenbreiten in Tabellen?

Flexible Spaltenbreiten in Tabellen mit CSS Calc

Auf der Suche nach einer Tabelle mit Spalten sowohl mit fester als auch mit flexibler Breite verwenden wir Die CSS-Funktion calc() allein kann möglicherweise unzureichend sein. Tabellen erzwingen spezifische Regeln für die Platzverteilung basierend auf dem Zellinhalt, was es für calc() schwierig macht, den verfügbaren Platz gleichmäßig zu verteilen.

Um diese Hürde zu überwinden, können wir das Tabellenlayout-Attribut verwenden, das für festgelegt ist Tabellenelement. Dadurch wird sichergestellt, dass die untergeordneten td-Elemente die von uns definierten Breiten einhalten. Zusätzlich muss für die Tabelle eine Breite (z. B. 100 %) angegeben werden.

Damit das Tabellenlayout wirksam wird, muss die Tabelle auch über den Anzeigetyp Tabelle verfügen. Dies ist die Standardeinstellung und wird normalerweise weggelassen. Der Vollständigkeit halber ist es hier jedoch enthalten.

Jetzt können wir Prozentsätze frei verwenden, um die Breite der verbleibenden Spalten anzupassen. Zum Beispiel:

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

td.album {
  width: 20%;
}

Der verbleibende Platz nach Berücksichtigung von Spalten mit fester Breite wird auf die Spalten mit relativen Breiten verteilt.

Eine Einschränkung besteht darin, dass display:table für die Tabelle verwendet wird bedeutet, dass wir keine Höhe (oder Mindesthöhe oder Höchsthöhe) mehr für die Tabelle definieren können.

Unten ist das geänderte Beispiel, das diese Korrekturen enthält:

<table border="0">

Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS Calc() und Table-Layout flexible Spaltenbreiten in Tabellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!