Verwenden von calc () mit Tabellen

Ich versuche, einen Tisch mit fester Breite td s und variabler Breite td .

Ich benutze die CSS-function calc() , aber irgendwie scheint es, als könnte ich % in Tabellen nicht verwenden.

Das ist also was ich bisher habe:

 
1 Title Interpret Album Year YouTube

Wie ich es sehe, sollte es funktionieren, aber es ist nicht.

Weiß jemand, wie man das triggers? Oder hat er vielleicht einen anderen Vorschlag, wie ich mein Ziel erreichen könnte?

    Tabellen weisen schwierige Regeln für die Verteilung des Spaltenbereichs auf, da sie standardmäßig den Speicherplatz abhängig vom Inhalt der Zellen verteilen. Calc (atm) wird einfach nicht damit arbeiten.

    Sie können jedoch das table-layout Attribut für die table , dass die untergeordneten td Elemente die genaue Breite erhalten, die Sie deklariert haben. Damit dies funktioniert, benötigen Sie auch eine width ( 100% funktioniert) auf dem Tisch.

     table{ table-layout:fixed; /* this keeps your columns with at the defined width */ width: 100%; /* a width must be specified */ display: table; /* required for table-layout to be used (since this is the default value it is normally not necessary; just included for completeness) */ } 

    und dann verwenden Sie einfache Prozentsätze für die verbleibenden Spalten.

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

    Nachdem der Platz für die Spalten mit fester Breite aufgebraucht wurde, wird der verbleibende Platz zwischen den Spalten mit relativer Breite aufgeteilt.

    Damit dies funktioniert, benötigen Sie die Standardanzeige display display: table (im Gegensatz zu sagen, display: block ). Dies bedeutet jedoch, dass Sie für die Tabelle keine height (einschließlich min-height und max-height ) mehr haben können.

    Siehe Ihr modifiziertes Beispiel.

    Calc ist die allgemeine function.

    -webkit-calc ist für Webkit.

    Fügen Sie diese entsprechend dem von Ihnen verwendeten Browser hinzu.

    Unabhängig davon wird Ihre -calc-function ignoriert. 3 tds haben, die 40% der verbleibenden Breite betragen? Das sind 120% insgesamt. Das ist ein Tisch. Die Breite des Elternteils hat immer Vorrang.

    Wenn Sie jedoch die TDs in 5% eingegeben haben, ist die Gesamtbreite kleiner als die der Tabelle, daher wird sie ebenfalls ignoriert.

    Bottom line: Verwenden Sie nicht calc mit Tabelle.