Tabellenformatierung

Hi,

You can use the “custom css class” (“Benutzerdefinierte CSS Klasse” field) to add a custom css class to your table: http://www.clipular.com/posts/4511333538856960?k=I1WSjPrJ6YNKSR6CEZTW5vJvv-k

I did this for the tables here: https://zfag.focus-demo.ch/leistungsausweis/ and added the class “right_td”. Note that your class name “right td” won’t work because spaces are not allowed (use underscores or minus symbols instead). I also had to replace the class names in the quick css field.

Please clear your browser cache if you don’t notice any table styling changes.

Best regards,
Dude

Hallo,
Der Grund warum .left td hier funktioniert hat ist, dass die Klasse “left” zur Tabelle hinzugefügt wurde und das Element td auch in der Tabelle enthalten war. Die Struktur ist daher vereinfacht:

<table class="left">
<tr>
<td>ZAM Z2</td>
<td>+13.2%</td>
<td>+32.5%</td>
<td>+5.8%</td>
</tr>
</table>

Der Code “.left td” selektiert richtig alle td Elemente dieser Tabelle. Wenn das “Benutzerdefinierte CSS Klasse”-Feld mit einer Klasse befüllt wird, macht die Klasse “left td” keinen Sinn, da der Browser diese als zwei Klassen interpretiert (CSS Selektor wäre dann .left.td td, weil “left td” die Klassen wären und td das zu selektierende Element der Tabelle). Es reicht also, nur “right” einzutragen – dann funktioniert der Code:

#top .avia-data-table.right td {
text-align: right !important;
color:#55524e !important;
font-size: 16px !important;
line-height: 26px !important;
}

#top .avia-data-table.right tr td {
text-align: right !important;
}

#top .avia-data-table.right tr td:first-child, #top .avia-data-table.right td:first-child {
width: 200px !important;
min-width: 200px !important;
text-align: left !important;
}

Wie ich mir die Sache auf der Website letztens angesehen habe stand in den “Benutzerdefinierte CSS Klasse”-Felder der Tabellen “left td” oder “right td” – daher mein Hinweis, dass das Leerzeichen keinen Sinn macht und nur “left_td” oder “right_td” eine valide Klasse wäre. Natürlich kann man einfach nur “right” und “left” schreiben (wie im Code Beispiel oben).

Best regards,
Dude

Hi,

Könntest du mir bitte einen Admin Account anlegen – dann sehe ich mir den derzeitigen CSS Code an und modifiziere diesen falls nötig.

Best regards,
Dude

Hi,

Ich habe mich eingeloggt, konnte aber mangels Admin-Rechte den Code nicht bearbeiten. Ich habe als Selektor nun

#top .avia-data-table.avia_pricing_minimal.right tr td {
    text-align: right;
}

für die CSS-Klasse “right” und

#top .avia-data-table.avia_pricing_minimal.left tr td {
    text-align: left;
}

für die CSS-Klasse “left” getestet und beide funktionieren.

Best regards,
Dude

Hi,

Ich würde folgenden Code empfehlen:

#top #wrap_all .avia-table.avia-data-table.avia_pricing_minimal{
table-layout: auto !important;
}

Dadurch passen sich die Spaltenbreiten automatisch der Länge des Textes an. Natürlich kann der Code um eine benutzerdefinierte Klasse ergänzt werden – zB bei “left”:

#top  #wrap_all .avia-data-table.avia_pricing_minimal.left {
table-layout: auto !important;
}

Best regards,
Dude

Hi,

Sehr gut – schön, dass ich helfen konnte :)

Best regards,
Dude