CMSimple Tests und Demo

Tabellen

Im Zuge der Einführung des TinyMCE 4.9.11 ist es mir gelungen, dem Tabellen-Plugin die eigenen Styles für den Bearbeitungsmodus auszutreiben. Eine neue Tabelle wird jetzt mit einem ungestylten html-Gerüst erstellt.

Tabellen sehen jetzt im Editor genauso aus wie im Frontend. Einzige Ausnahme: Hat die Tabelle keine Rahmen, werden im Editor zur besseren Orientierung gestrichelte Rahmen angezeigt. Deshalb sollten die Angaben für border: mit !important verstärkt werden, da sie sonst im Editor nicht wirksam sind.

Tabelle ohne zugewiesene CSS Klasse:

/* table basic design */

table {border-collapse: collapse;}
td {min-width: 20px!important;}


Hier nun ein paar Designvarianten, definiert in der stylesheet.css des Templates. Die CSS Klassen finden Sie weiter unten, sie können der (markierten) Tabelle per Format => Formate => Table styles zugewiesen werden.

Tabelle im Design "grey":

Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen. Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen. Ein wenig Inhalt in der Tabellenzelle
Ein wenig Inhalt in der Tabellenzelle Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen.

Tabelle im Design "white":

Ein wenig Inhalt in der Tabellenzelle Ein wenig Inhalt in der Tabellenzelle
Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen. Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen. Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen.
Ein wenig Inhalt Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen.

Tabelle im Design "transparent":

Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen. Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen. Ein wenig Inhalt in der Tabellenzelle
Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen. Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen.

Die CSS Klassen:

Die folgenden CSS-Beispiele können Sie einfach in die stylesheet.css Ihres Templates kopieren.

/* table design grey */

table.grey {
width: 100%;
height: auto;
background: #fff;
border: 0;
margin: 2px 0 16px 0;
border-collapse: separate;
}

table.grey td {
width: auto;
height: auto;
vertical-align: top;
background: #d0d6d9;
color: #333;
line-height: 1.2em;
border: 0!important;
padding: 8px 12px;
}

table.grey td p {
margin: 6px 0;
}


/* table design white */

table.white {
width: 100%;
height: auto;
background: #fff;
border: 0;
border-collapse: collapse;
margin: 2px 0 16px 0;
}

table.white td {
width: auto;
height: auto;
vertical-align: top;
background: #fff;
color: #333;
line-height: 1.2em;
border: 1px solid #aaa!important;
padding: 8px 12px;
}

table.white td p {
margin: 6px 0;
}


/* unsichtbare Tabelle linksbündig / unvisible table align left */

table.transparent {
width: auto;
height: auto;
border: 0;
border-collapse: collapse;
margin: 2px 0 16px 0;
}

table.transparent td {
width: auto;
height: auto;
vertical-align: top;
line-height: 1.2em;
border: 0px solid!important;
padding: 8px 24px 8px 0;
}

table.transparent td p {
margin: 6px 0;
}
nach oben