CSS Grid an Stelle von Tabellen verwenden

Hallo,

ich habe eine Tabelle mit 4 Spalten. Da Tabellen bekanntlich nicht responsive sind, werden die Inhalte leider nicht korrekt bis gar nicht dargestellt, wenn man mit dem Handy die Seite besucht.

Ich würde gerne das CSS Grid mit folgendem Code einsetzen:

.container{
display: grid;
grid-template-columns: 300px 2fr 2fr 2fr;
}

Geht das so? Die 300px nehme ich weil es ein Bild in dieser Spalte ist, die anderen 3 Spalten sind Text

Wo kann ich so ein Code in Zeta 14. hinterlegen damit das umgesetzt wird?

Wichtig ist vielleicht noch, dass diese Seite ein Teil des CMS Widgets ist. evtl. muss der CSS Code da im Widget Editor angelegt werden?

Danke für einen Tipp

Gruß

gieri

Hallo Steffen,

muss leider nochmal nachfrage weil mir das in Verbindung mit dem CMS Editor nicht ganz klar ist.

Also ich erstelle die CSS Regel global im ZP und im Editor weiße ich der Tabelle dann die Klasse zu?

CSS direkt in ZP:

.table-responsiv {

    width: 100%;

    padding: 0px;

    margin-bottom: 0px;

    overflow-y: hidden;

    border: 1px solid #DDD;

    overflow-x: auto;

    min-height: 0.01%;

}

Klasse im Code des CMS Editor der Tabelle zuweisen:

<div class="table-responsiv">

<table width="100%">...</table>

</div>

Ist das korrekt?

Gruß

Gieri