Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #972816

    Wie können Tabellen via CSS formatiert werden?
    – Anpassung Spaltenbreite
    – Titelzeile ohne Kapitälchen
    – erste Spalte, zweite/dritte/vierte Spalte unterschiedliche Text-Ausrichtungen (links und rechts)

    Besten Dank für’s Helfen.

    #973134

    Hey Esther,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    #973187
    This reply has been marked as private.
    #973693

    Hi zugerberg-finanz,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

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

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #975686

    Hi Victoria

    Thanks for your code, but unfortunately it doesn’t work in Quick CSS, nor in Enfold custom.css :-(
    Furthermore: Is it not possible to assign this formatting to a separate CSS class, so that it can be inserted into the custom CSS class field for each table?

    Thanks for the feedback.

    Best regards,
    Esther

    #975867

    Hi Esther,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #977963

    Hi Victoria
    You’ll find the access in the Box below.

    Please note that this formatting is only intended for the tables on this page:

    The table here: https://zfag.focus-demo.ch/auf-einen-blick/
    would be perfect with this formatting:
    .left td { text-align: left !important; color:#55524e !important; font-size: 16px !important; line-height: 26px !important; padding-left: 0px !important; border: 0px !important; }

    Thanks a lot!

    Best regards,
    Esther

    #980672

    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

    #984644

    Hi Dude,

    Unfortunately does not work that way…

    Best regards,
    Esther

    #985686

    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

    #985961

    Hi Dude

    besten Dank für deinen Input – ich glaube, ich hab das mit der Namensgebung soweit verstanden.

    ABER: wenn ich deinen Code nehme, ihn in eine Klasse namens “right” packe und der Tabelle zuweise passiert genau nichts – und das irritiert mich so dermassen… Resp. was mache ich falsch, dass das nicht funktioniert?

    LG
    Esther

    #986004

    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

    #986282

    Hi Dude,
    aber klar doch…

    #987544

    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

    #989148

    Hi Dude,

    es hat jetzt soweit funktionert resp. sieht ungefähr so aus, wie’s aussehen soll. Eine allerletzte Frage hätte ich allerdings noch: Auf Mobile funktioniert es recht gut, der ersten Spalte eine fixe Breite zuzuweisen – auf Desktop sind die Spalten immer gleich, egal, welche Breite der ersten Spalte zugewiesen wird. Gibt’s da einen Trick? Cool wäre, wenn ich die Spaltenbeschriftungen (z. B. ZAM Nachhaltigkeit 100) auf die gleiche Zeile kriegen würde…

    Danke für deine Hilfe & Geduld.

    Best regards,
    Esther

    #989872

    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

    #990121

    Hi Dude,

    super, jetzt passt’s! Besten Dank.

    Viele Grüsse
    Esther

    #990606

    Hi,

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

    Best regards,
    Dude

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Tabellenformatierung’ is closed to new replies.