# ArtikelDetails - Tabellen mit TinyMCE?

**URL:** https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064
**Category:** Shopware 3.5
**Tags:** administration
**Created:** [15. Dezember 2010 um 11:36 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064 "2010-12-15T11:36:53Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [15. Dezember 2010 um 11:36 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/1 "2010-12-15T11:36:53Z")

</div>

Moin! Bin heute am einpflegen von Artikel-Beschreibungen. Das TinyMCE ist ja eigentlich ganz fein. Aber grosse Probleme habe ich mit jeder Art von Tabelle. Ich kriege einfach die Rahmen nicht in den Griff. Eigentlich kann man ja Rahmen, Gitter usw. in dem Menü “Tabelle bearbeiten” anpassen. Aber alles was ich da angebe wird ignoriert. Es ändert sich nix, die Tabellen schauen immer gleich aus. Scheinbar wird da irgendwas via CSS noch vererbt? Hat mir da jemand einen Tip? Wie geht Ihr damit um? AS

---

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [15. Dezember 2010 um 13:28 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/2 "2010-12-15T13:28:37Z")

</div>

OK, ich bin etwas weiter … Ganz am Ende der style.css steht das hier: `/\* Tables \*/ tbody, tbody tr, thead, thead tr {border: 0 none;} table { display: block; border: 1px solid #c7c7c7; width: auto !important; } table thead tr th { background: #f5f5f5; padding-left: 10px; } table tbody tr td, table tbody tr th { border-top: 1px dashed #dfdfdf; } table td, table th {color: #999;}` Und das wird wohl dann auf generell alle Tabellen angewandt. Nur wenn ich das jetzt wieder ändere, dann stimmen ja die Tabellen im Rest des Shops nicht mehr. Ich möchte ja eigentlich nur, dass ich die Tabellen in der Artikelbeschreibung auch tatsächlich mit TinyMCE gestalten kann. Wie packe ich das jetzt an? Mir ist auch aufgefallen, dass in der Tabelle dann plötzlich id=„zebra“ steht. Hab ich da aber nicht rein geschrieben … :wtf: Kann mir mal einer einen Tip geben? AS P.S.: Eigentlich gehört dieses Posting wohl in den Bereich „Templates und Design“, denke ich. Vielleicht mag das ja mal jemand verschieben, der dazu die nötigen Rechte hat. 😉

---

<div class="post-metadata">

### Author: ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)
#### Post date: [15. Dezember 2010 um 13:40 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/3 "2010-12-15T13:40:46Z")

</div>

Der neuerstellten Tabelle kannst du ja in den Eigenschaften eine Class mitgeben z.B. TEST. Wenn du dann in der CSS deine Änderugen nur für die Tabellen, Spalten etc. in der Class TEST definierst, sollte es eig. gehen. ` table.test { display: block; border: 1px solid #c7c7c7; } `

---

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [15. Dezember 2010 um 13:49 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/4 "2010-12-15T13:49:55Z")

</div>

Danke Dir! Versuche ich gleich … Übrigens ist der grösste Teil schon geschafft wenn man das display:block; rausnimmt. Habe da gerade mal in firebug rumprobiert … Der Rest sieht dann ganz ordentlich aus. Achja, eins noch: die oberste gestrichelte Linie kommt irgendwie daher, dass seit 3.5.3 immer ein thead erwartet wird. Wie kriege ich DAS weg? wo ist das definiert? Denn die Tabellen aus TinyMCE haben im Standard eben keinen thead … AS

---

<div class="post-metadata">

### Author: ![plotterinsel](https://avatars.discourse-cdn.com/v4/letter/p/779978/32.png) [@plotterinsel](https://forum.shopware.com/u/plotterinsel)
#### Post date: [15. Dezember 2010 um 13:55 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/5 "2010-12-15T13:55:28Z")

</div>

ich habe mit dem Problem vor ein paar Tagen auch schon gekämpft 😉 [http://forum.shopware.de/templates-und-design-f14/tabellendarstellung-nach-update-defekt-t891.html](http://forum.shopware.de/templates-und-design-f14/tabellendarstellung-nach-update-defekt-t891.html) das “zebra” kommt aus der Templatedatei “\_default/frontend/detail/description.tpl” Zeile 27: [code]{\* Article description \*} {block name=‘frontend\_detail\_description\_text’} {$sArticle.description\_long|replace:"

zebra verpasst bekommen… Gruss René

---

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [15. Dezember 2010 um 14:10 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/6 "2010-12-15T14:10:18Z")

</div>

Supi, Danke! Und für was dient das “zebra”? Hast Du es raus genommen? Wie gehst DU mit dem thead um (bei TinyMCE)? AS

---

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [15. Dezember 2010 um 14:22 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/7 "2010-12-15T14:22:52Z")

</div>

Sehe gerade, das hat mit thead garnix zu tun. Das ist dieser Teil hier: `table tbody tr td, table tbody tr th { border-top: 1px dashed #dfdfdf; }` Oder? Der verpasst allen Zellen am oberen Rand eine gestrichelte Linie. Und bei der ersten Zeile ist das dann direkt unter dem Rahmen der Tabelle zu sehen. Und das sieht dann so komisch aus… Ist das bei Dir auch so? Oder wie hast Du das gelöst? AS

---

<div class="post-metadata">

### Author: ![plotterinsel](https://avatars.discourse-cdn.com/v4/letter/p/779978/32.png) [@plotterinsel](https://forum.shopware.com/u/plotterinsel)
#### Post date: [15. Dezember 2010 um 14:26 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/8 "2010-12-15T14:26:52Z")

</div>

die id “zebra” bewirkt, das die Zeilen einer Tabelle abwechselnde Hintergrundfarben bekommen. Dies wird durch die Javascript- Funktion stripe in der jquery.shopware.js realisiert, Zeile 1821: `//Stripes tables $.stripe = function (id) { var even = false; var evenColor = arguments[1] ? arguments[1] : "#fff"; var oddColor = arguments[2] ? arguments[2] : "#efefef"; var table = document.getElementById(id); if (!table) { return } var tbodies = table.getElementsByTagName("tbody"); for (var h = 0; h \< tbodies.length; h++) { var trs = tbodies[h].getElementsByTagName("tr"); for (var i = 0; i \< trs.length; i++) { if (!hasClass(trs[i]) && !trs[i].style.backgroundColor) { var tds = trs[i].getElementsByTagName("td"); for (var j = 0; j \< tds.length; j++) { var mytd = tds[j]; if (!hasClass(mytd) && !mytd.style.backgroundColor) { mytd.style.backgroundColor = even ? evenColor : oddColor } } } even = !even } } };` … aber nur wenn der Zeile bzw. Spalte kein Hintergrund oder ne Klasse zugewiesen ist! Wenn du also den Zeilen ein Hintergrund zuweist, tritt der Effekt nicht auf. Gruss René

---

<div class="post-metadata">

### Author: ![plotterinsel](https://avatars.discourse-cdn.com/v4/letter/p/779978/32.png) [@plotterinsel](https://forum.shopware.com/u/plotterinsel)
#### Post date: [15. Dezember 2010 um 14:28 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/9 "2010-12-15T14:28:54Z")

</div>

das mit dem dashed ist bei mir auch so, aber ich habe da gerade eine Idee! Werd da gleich mal was probieren. Vielleicht bekomm ichs ja weg… 😉 Gruss René

---

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [15. Dezember 2010 um 14:32 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/10 "2010-12-15T14:32:53Z")

</div>

Also, dann ist das mit dem „zebra“ ja kein Problem. Kann man ja im Template das „replace“ einfach entfernen … Nachdem ich aus `display: block; ` gemachte habe `display: inline-block; ` sieht das auch schon mal ordentlich aus. Bleiben eben nur die Strichel-Linien. Wie kriegt man die NUR in der obersten Reihe raus? AS EDIT: bin gespannt … 🙂

---

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [15. Dezember 2010 um 14:43 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/11 "2010-12-15T14:43:34Z")

</div>

Man könnte an der Stelle auch den „zebra-replace“ dahingehend umschreiben und nutzen (statt löschen), um die Klasse „table.test“ (oder dann „table.artdetail“) zu platzieren. Dann müsste man die nicht immer in TinyMCE mit eintragen, oder? ALT: [code] {\* Article description \*} {block name=‚frontend\_detail\_description\_text‘} {$sArticle.description\_long|replace:"

---

<div class="post-metadata">

### Author: ![plotterinsel](https://avatars.discourse-cdn.com/v4/letter/p/779978/32.png) [@plotterinsel](https://forum.shopware.com/u/plotterinsel)
#### Post date: [15. Dezember 2010 um 14:50 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/12 "2010-12-15T14:50:10Z")

</div>

naja, macht wenig sinn… weil sich das ja auf alle Tabellen in diesem Block auswirkt, und nicht nur die, die übers TinyMCE erstellt werden… somit würden die anderen Tabellen auch mit formatiert werden… Gruss René

---

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [15. Dezember 2010 um 14:51 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/13 "2010-12-15T14:51:33Z")

</div>

Naja, aber andere Tabellen habe ich dort in der Artikel-Detail-Ansicht eigentlich nicht… AS

---

<div class="post-metadata">

### Author: ![plotterinsel](https://avatars.discourse-cdn.com/v4/letter/p/779978/32.png) [@plotterinsel](https://forum.shopware.com/u/plotterinsel)
#### Post date: [15. Dezember 2010 um 15:13 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/14 "2010-12-15T15:13:44Z")

</div>

ich kann das mit dem oberen dashed Rahmen, grad nicht nachvollziehen, da das bei mir perfekt durch den Vollrahmen der Tabellen überdeckt wird…☹

---

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [15. Dezember 2010 um 15:23 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/15 "2010-12-15T15:23:29Z")

</div>

Hier kannst Du auch sehen, was ich meine: [http://www.saddles.de/westernsattel/con … sic-reiner](http://www.saddles.de/westernsattel/continental-saddlery/159/continental-sequoyah-classic-reiner) AS

---

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [15. Dezember 2010 um 15:49 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/16 "2010-12-15T15:49:08Z")

</div>

OK, ich hatte aus „display: block;“ gemacht „display: inline-block;“. Jetzt habe ich das geändert in „display: table;“ -\> PASST! Sieht jetzt also so aus: `/\* Tables - Korrektur nach 3.5.3 \*/ tbody, tbody tr, thead, thead tr {border: 0 none;} table { display: table; border: 1px solid #c7c7c7; width: auto !important; } table thead tr th { background: #f5f5f5; padding-left: 10px; } table tbody tr td, table tbody tr th { border-top: 1px dashed #dfdfdf; } table td, table th {color: #999;}` Anschluss-Frage zur Nomenklatur: ottschos Vorschlag mit der eigenen Klasse als „table.mytable“ gefällt mir gut. Das ist ja dann eine Unterklasse zu „table“. Da mir aber CSS noch etwas neu ist komme ich mit dem Rest mit der Schreibweise nicht klar. Die Klasse „table.mytable“ erbt ja alles, was in ihr nicht explizit definiert wird von der Klasse „table“, richtig? Und wenn ich nun für diese neue Klasse „table.mytable“ hier etwas ändern will: ?? `} table thead tr th { background: #f5f5f5; padding-left: 10px; } ` Wie muss das dann aussehen? so? : `} table.mytable thead tr th { background: #f5f5f5; padding-left: 10px; } ` Funktioniert das? AS

---

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [15. Dezember 2010 um 16:09 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/17 "2010-12-15T16:09:20Z")

</div>

Hm. Also ich habe jetzt eine Klasse angelegt. Erst als table.test, das funktionierte nicht. Dann als mytable, geht auch nicht. Im HTML Code steht zwar … [code]

| sdfwefr | fghfgh | ertert | sdfsdf |  
| 234 | 2342342344 | 234 | 234234234 |  
| 234 | &nbsp; | 234234234 | &nbsp; |  
| &nbsp; | 234234 | &nbsp; | 234 |

[/code] Also, die KLasse kommt in der Tabelle an. Aber rechts beim CSS holt er sich wieder alles aus table von der styles.css … Kann es sein, dass das „zebra“ eben über das framework auch diese Klasse nachträglich zuweist? Bin ratlos … AS

---

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [16. Dezember 2010 um 08:32 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/18 "2010-12-16T08:32:30Z")

</div>

Moin! Also ich kriege das einfach nicht hin. Das „zebra“ hatte ich jetzt entfernt. Aber das war es wohl auch nicht. Ich will doch einfach nur einer Tabelle in der Artikel-Beschreibung eine eigene Klasse geben und diese dadurch entsprechend darstellen. Das sollte doch möglich sein, oder? Die Klassen-Zuweisung kommt auch im html-Code an. Aber in der CSS-Ansicht rechts unten im FireBug sehe ich, dass die Formatierungen immer noch aus der styles.css aus \_default kommen. Was läuft da falsch? AS

---

<div class="post-metadata">

### Author: ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)
#### Post date: [16. Dezember 2010 um 08:42 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/19 "2010-12-16T08:42:28Z")

</div>

Hast du es mal so versucht: ` table.mytable thead.mytable tr.mytable th.mytable { background: #f5f5f5; padding-left: 10px; } ` Wenn nicht gib der Tabelle eine ID oder lass die ID Zebra und versuch es so: ` #Zebra table thead tr th { background: #f5f5f5; padding-left: 10px; } ` EDIT: Alles ungetestet. Aber ich versuche es nachher bei Gelegenheit mal.

---

<div class="post-metadata">

### Author: ![Alpine\_Swift](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@Alpine\_Swift](https://forum.shopware.com/u/Alpine_Swift)
#### Post date: [16. Dezember 2010 um 08:57 UTC](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064/20 "2010-12-16T08:57:33Z")

</div>

Ich wollte eigentlich erst mal nur Deinen Vorschlag von hier umsetzen: [administration-f11/artikeldetails-tabellen-mit-tinymce-t958.html#p5354](http://forum.shopware.de/administration-f11/artikeldetails-tabellen-mit-tinymce-t958.html#p5354) Aber schon das funktioniert nicht: `table.test { display: table; }` Im html-code steht zwar nun: [code]

…[/code] Aber in den Styles beim firebug steht trotzdem: `table { border: 1px solid #C7C7C7; display: block; width: auto !important; } usw.` Und das schnalle ich einfach nicht. Wo nimmt er das her? AS

[Nächste Seite](https://forum.shopware.com/t/artikeldetails-tabellen-mit-tinymce/1064.md?page=2)
