Notifications

Clear all

Style Tables in topics and post replies

Page 2 / 2 Prev

How-to and Troubleshooting

Last Post by artdenorg 2 months ago

18 Posts

2 Users

0 Reactions

288 Views

RSS

Posts: 13

artdenorg

Topic starter

Sep 14, 2024 1:55 pm

(@artdenorg)

Active Member

Joined: 2 months ago

For fun, I also tried a purely <div> style bootstrap "table" and the same thing happens.

<div style="background:LightGray;width:200px;
            padding:20px;height:120px; text-align: center; ">
  <div style="padding:5px;background:linen;">
    Header
  </div>
  <div style="float:left;
         padding:20px 5px;margin:0 8px 8px 0px; background: red">
    Sidebar
  </div>
  Article
</div>

Header

Sidebar

Article

Screenshot-2024-09-14-at-9.54.19 AM.png

Follow Art Den on social media!
Facebook | Instagram | Twitter/X | TikTok | LinkedIn

1 Reply

artdenorg

(@artdenorg)

Joined: 2 months ago

Active Member

Posts: 13

Sep 14, 2024 1:56 pm

Reply to

artdenorg

So it more-or-less works on the wpforo, but doesn't work on my own forum 😭

Follow Art Den on social media!
Facebook | Instagram | Twitter/X | TikTok | LinkedIn

Posts: 13

artdenorg

Topic starter

Sep 14, 2024 2:25 pm

(@artdenorg)

Active Member

Joined: 2 months ago

I also tried the solution here: https://wpforo.com/community/how-to-and-troubleshooting-2/table-formatting-in-forum-reply/#post-70467

<table style="width: 100%;">
  <tbody>
    <tr>
      <th style="text-align: left; border: 1px solid black;">Test Text</th>
      <th style="text-align: left; border: 1px solid black;">Test Text Test Text</th>
</tr>
</table>

Where the formatting just turns into this (screenshot)

Screenshot-2024-09-14-at-10.25.02 AM.png

Follow Art Den on social media!
Facebook | Instagram | Twitter/X | TikTok | LinkedIn

5 Replies

Tutrix

(@tutrix)

Joined: 5 years ago

Noble Member

Posts: 1453

Sep 14, 2024 3:03 pm

Reply to

artdenorg

@artdenorg

Try

<table style="border-collapse: collapse;width: 100%;">
<tbody>
<tr>
<td style="width: 35%;">
<div style="background: #28324e;padding: 5px 20px;color: #fff;"><span><strong>G A L A X I E S ☆ V. 4<br></strong></span></div>
</td>
<td colspan="2" style="background: #bbb;">&nbsp;</td>
</tr>
<tr style="background: #4d225a;color: #fff;">
<td style="text-align: center;padding: 5px;" colspan="3">
<p><span><strong>style O N E&nbsp;</strong></span></p>
<p><span>Sharp and bright avatar edit</span></p>
</td>
</tr>
<tr>
<td colspan="2" rowspan="2" style="padding: 10px;vertical-align: middle;"><a title="Enlarge image" href="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8241aff9-371f-4a40-98fd-979c5c7706f2/dfigndy-dd6cd122-dfe1-46c8-9cf4-93bc0e8af4fd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgyNDFhZmY5LTM3MWYtNGE0MC05OGZkLTk3OWM1Yzc3MDZmMlwvZGZpZ25keS1kZDZjZDEyMi1kZmUxLTQ2YzgtOWNmNC05M2JjMGU4YWY0ZmQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.3gvoF3-zCIk2fnGV2fS7sgJh2dYfAbRsnpZR8v5PpCI" rel="nofollow" target="_blank"><img decoding="async" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8241aff9-371f-4a40-98fd-979c5c7706f2/dfigndy-dd6cd122-dfe1-46c8-9cf4-93bc0e8af4fd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgyNDFhZmY5LTM3MWYtNGE0MC05OGZkLTk3OWM1Yzc3MDZmMlwvZGZpZ25keS1kZDZjZDEyMi1kZmUxLTQ2YzgtOWNmNC05M2JjMGU4YWY0ZmQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.3gvoF3-zCIk2fnGV2fS7sgJh2dYfAbRsnpZR8v5PpCI" alt="Gypscl by rookiequeen" width="160" style="border: 2px solid green;"></a><a title="Enlarge image" href="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8241aff9-371f-4a40-98fd-979c5c7706f2/dekvqsg-5a40c09e-af94-4974-8f48-9e097f81b599.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgyNDFhZmY5LTM3MWYtNGE0MC05OGZkLTk3OWM1Yzc3MDZmMlwvZGVrdnFzZy01YTQwYzA5ZS1hZjk0LTQ5NzQtOGY0OC05ZTA5N2Y4MWI1OTkucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xlSzzHpv4IcVINxHNbysPCj9OefYpsbbavTEYIhKhds" rel="nofollow" target="_blank"><img decoding="async" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8241aff9-371f-4a40-98fd-979c5c7706f2/dekvqsg-5a40c09e-af94-4974-8f48-9e097f81b599.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgyNDFhZmY5LTM3MWYtNGE0MC05OGZkLTk3OWM1Yzc3MDZmMlwvZGVrdnFzZy01YTQwYzA5ZS1hZjk0LTQ5NzQtOGY0OC05ZTA5N2Y4MWI1OTkucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xlSzzHpv4IcVINxHNbysPCj9OefYpsbbavTEYIhKhds" alt="Devnn by rookiequeen" width="160" style="border: 2px solid green;"></a><a title="Enlarge image" href="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8241aff9-371f-4a40-98fd-979c5c7706f2/dh1kz5z-7f86a7ff-4d38-476b-b6f5-30735e840635.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgyNDFhZmY5LTM3MWYtNGE0MC05OGZkLTk3OWM1Yzc3MDZmMlwvZGgxa3o1ei03Zjg2YTdmZi00ZDM4LTQ3NmItYjZmNS0zMDczNWU4NDA2MzUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.Dcllpn2UMCWpBUoLfXxsliTk2bwmze9Hvzr7kERgopk" rel="nofollow" target="_blank"><img decoding="async" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8241aff9-371f-4a40-98fd-979c5c7706f2/dh1kz5z-7f86a7ff-4d38-476b-b6f5-30735e840635.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgyNDFhZmY5LTM3MWYtNGE0MC05OGZkLTk3OWM1Yzc3MDZmMlwvZGgxa3o1ei03Zjg2YTdmZi00ZDM4LTQ3NmItYjZmNS0zMDczNWU4NDA2MzUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.Dcllpn2UMCWpBUoLfXxsliTk2bwmze9Hvzr7kERgopk" alt="Reverse2" width="160" style="border: 2px solid green;"></a><a title="Enlarge image" href="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8241aff9-371f-4a40-98fd-979c5c7706f2/dg2ukx2-5a8a83fa-b3fe-4357-8ff4-79f15a357b32.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgyNDFhZmY5LTM3MWYtNGE0MC05OGZkLTk3OWM1Yzc3MDZmMlwvZGcydWt4Mi01YThhODNmYS1iM2ZlLTQzNTctOGZmNC03OWYxNWEzNTdiMzIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.WIktSdRj1oXuk06XJFamxx78WD2nW2PkZsVB_myl4gE" rel="nofollow" target="_blank"><img decoding="async" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8241aff9-371f-4a40-98fd-979c5c7706f2/dg2ukx2-5a8a83fa-b3fe-4357-8ff4-79f15a357b32.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgyNDFhZmY5LTM3MWYtNGE0MC05OGZkLTk3OWM1Yzc3MDZmMlwvZGcydWt4Mi01YThhODNmYS1iM2ZlLTQzNTctOGZmNC03OWYxNWEzNTdiMzIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.WIktSdRj1oXuk06XJFamxx78WD2nW2PkZsVB_myl4gE" alt="Iicares by rookiequeen" width="160" style="border: 2px solid green;"></a>
</td>
<td style="background-color: #ab7db5;color: #000;text-align: center;vertical-align: top;">
<p><strong>F O R M</strong></p>
<p><strong>STYLE ONE - Avatar edit</strong></p>
</td>
</tr>

<tr>
<td style="background: #f3e0f7;padding: 10px;text-align: center;">
<p><strong>STYLE ONE</strong></p>
<p><strong>Screenshots:</strong></p>
<p><strong>&nbsp;</strong></p>
<p><strong>Hairstyle (only for bald screenshots):</strong></p>
<p><strong>&nbsp;</strong></p>
<p><strong>Text:</strong></p>
<p><strong>&nbsp;</strong></p>
<p><strong>Effects (Blinking/Winking/Glowing/Sparkling eyes/None):</strong></p>
<p><strong>&nbsp;</strong></p>
<p><strong>Extra (Speedpaint/Accessories/etc):</strong></p>
<p><strong>&nbsp;</strong></p>
<p><strong>Final price:</strong></p>
<p><strong>&nbsp;</strong></p>
<p><strong>PayPal email</strong></p>
</td></tr>
<tr>
<td style="padding-top: 10px; background: #4d225a;color: #fff;text-align: center;" colspan="3">
<p><span><strong>style T W O&nbsp;</strong></span></p>
<p><span>Softer and painty, screenshots not needed</span></p>
</td>
</tr>
</tbody>
</table>

visit my wpForo Community > Tutrix.de
with lots of customization & modification, e.g. hover cards, topic/post preview on mouseover, chatbox and much more...

artdenorg

(@artdenorg)

Joined: 2 months ago

Active Member

Posts: 13

Sep 14, 2024 3:23 pm

Reply to

Tutrix

@tutrix Unfortunately it gives the same issue.

I decided to inspect the preview box and a few console errors were coming up

Before I used your code, the console error I got was:

Unload event listeners are deprecated and will be removed. tinymce

Screenshot-2024-09-14-at-11.21.00 AM.png

Follow Art Den on social media!
Facebook | Instagram | Twitter/X | TikTok | LinkedIn

Tutrix

(@tutrix)

Joined: 5 years ago

Noble Member

Posts: 1453

Sep 14, 2024 3:28 pm

Reply to

artdenorg

@artdenorg

hmmm.....

I have just tested it, it works

table.jpg

visit my wpForo Community > Tutrix.de
with lots of customization & modification, e.g. hover cards, topic/post preview on mouseover, chatbox and much more...

artdenorg

(@artdenorg)

Joined: 2 months ago

Active Member

Posts: 13

Sep 14, 2024 3:34 pm

Reply to

Tutrix

@tutrix I know it works here, but on my forum it doesnt :/

It just yoinks out a ton of formatting - https://www.artden.org/community/digital-art/test-shop/#post-188

Follow Art Den on social media!
Facebook | Instagram | Twitter/X | TikTok | LinkedIn

Tutrix

(@tutrix)

Joined: 5 years ago

Noble Member

Posts: 1453

Sep 15, 2024 7:06 am

Reply to

artdenorg

@artdenorg

Maybe a conflict with a plugin.
Deactivate the plugins and activate them one by one to see which one is causing the issue.

visit my wpForo Community > Tutrix.de
with lots of customization & modification, e.g. hover cards, topic/post preview on mouseover, chatbox and much more...