Wie kann ich mit calc() eine Tabelle mit Spalten mit fester und variabler Breite erstellen?

Verwenden von calc() mit Tabellen: Spalten mit fester und variabler Breite

Beim Versuch, eine Tabelle mit fester und variabler Breite zu erstellen Wenn Sie die CSS-Funktion calc() verwenden, um die Breite von Spalten zu ändern, kann es zu Problemen mit Prozentsätzen (%) kommen. Tabellen haben spezielle Regeln für die Platzverteilung, die calc() inkompatibel machen.

Lösung mit Tabellenlayout:

Um dieses Problem zu beheben, setzen Sie das Attribut „Tabellenlayout“ auf „Fest“. für den Tisch. Dadurch werden die untergeordneten Elemente (td) der Tabelle gezwungen, die angegebenen Breiten einzuhalten. Stellen Sie außerdem die Anzeige der Tabelle auf „Tabelle“ ein und geben Sie eine Breite an.

table{
   table-layout:fixed;
   width: 100%;
   display: table;
}

Prozentbasierte Spalten:

Verwenden Sie für die übrigen Spalten einfache Prozentsätze anstelle von Berechnung (). Der verbleibende Platz nach der Unterbringung der Spalten mit fester Breite wird proportional auf diese Spalten verteilt.

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

Hinweis:

Um diese Lösung nutzen zu können, muss die Tabellendarstellung erfolgen auf den Tisch eingestellt werden, wodurch Sie daran gehindert werden, eine Höhe festzulegen.

Geändert Beispiel:

Hier ist eine modifizierte Version Ihres Originalcodes:

<table border="0">

Das obige ist der detaillierte Inhalt vonWie kann ich mit calc() eine Tabelle mit Spalten mit fester und variabler Breite erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!