J5 Cassiopeia: How do I get internal border-lines to show up within a Table in a published article?

Everything to do with Joomla! 5.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
sthop
Joomla! Apprentice
Joomla! Apprentice
Posts: 18
Joined: Mon Aug 22, 2022 9:47 am

J5 Cassiopeia: How do I get internal border-lines to show up within a Table in a published article?

Post by sthop » Sun Apr 07, 2024 1:21 pm

Hello,

I use Joomla 5 with its Cassiopeia Template.
I assume that the Cassiopeia Template is compleet and functions correctly.
I do not use any extra CSS styling (selfmade or imported), because:
My experience in the past is that, with every new update or upgrade, I have to check if any mark-up or CSS is broken or wrongly aligned etc. Or nasty changes in extra plugins etc. Then, I have to clean up the mess.
So, I keep my site clean, and lean heavily on the functionality of Cassiopeia and the built-in WYSIWIG editor: TinyMCE (Set 0).

The author of articles (editor) complains about the loss of internal border-lines in a Table published in any article.
When creating a table in the backend (admin dashboard) I do see that every cell, row and column has neat border lines on all sides.
After publishing the article (containing 3 tables) all visitors will only see (in the frontend) the outer lines of the tables, but no inner border-lines per cell or per row or per column!
240407 Table Borderlines dissapeared in publshed article (difference backend-frontend).jpg
Why are the internal lines not visible in a published article?
How can I fix this?
The Table-functionality within TinyMCE (v6?) is meagre with regard to styling as well as alignment of text etc..
Do I need to install an extra TinyMCE-plugin?
Where can I find such a plugin and can I install it in the easy Joomla-way?

Regards,
Sthop
WAMP: Windows 11, Apache, MariaDB, PHP, and Joomla 5.0.3
You do not have the required permissions to view the files attached to this post.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 31038
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: J5 Cassiopeia: How do I get internal border-lines to show up within a Table in a published article?

Post by Per Yngve Berg » Sun Apr 07, 2024 1:53 pm

Add CSS to user.css file in the Cassiopeia Template.

AlCher
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Mon Sep 19, 2005 8:33 am

Re: J5 Cassiopeia: How do I get internal border-lines to show up within a Table in a published article?

Post by AlCher » Sun Apr 07, 2024 4:41 pm

It may be useful - Tables · Bootstrap v5.3
Bootstrap version 5.3 is used in Joomla 5.0.3 Cassiopeia Template.
You can use it in articles:

Code: Select all

<table class="table table-bordered">
...
</table>

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1675
Joined: Tue Jun 30, 2020 12:17 pm

Re: J5 Cassiopeia: How do I get internal border-lines to show up within a Table in a published article?

Post by Pavel-ww » Mon Apr 08, 2024 8:38 am

sthop wrote:
Sun Apr 07, 2024 1:21 pm
My experience in the past is that, with every new update or upgrade, I have to check if any mark-up or CSS is broken or wrongly aligned etc.
Hi.

Your experience only says that you did something wrong. With high quality CSS coding and placing CSS code in the right place, updates will never break this.

You need to write your own CSS for tables or use bootstrap tables, as advised above.

Installation of additional plugins for such a simple task is excess. And exactly such a plugin can lead to problems after updates.

And CSS is that you can always easily fix. Unlike third -party plugins.

If we talk about the cleanliness of the site, then CSS is exactly cleanliness. A large number of third party extensions are dirt and conflicts.

sthop
Joomla! Apprentice
Joomla! Apprentice
Posts: 18
Joined: Mon Aug 22, 2022 9:47 am

Re: J5 Cassiopeia: How do I get internal border-lines to show up within a Table in a published article?

Post by sthop » Tue Apr 09, 2024 7:35 am

Hello Per Yngve Berg, AlCher and Pavel-ww,
Thank you for your answers.
Despite my resistance to installing many external plugins, etc, I did install the free JCE Editor extension now.
JCE has many more setting-options than TinyMCE with regard to Table mark-up and styling.
This way, I can finetune my Table make-up etcetera the way I like it.
Regards, Sthop

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 343
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: J5 Cassiopeia: How do I get internal border-lines to show up within a Table in a published article?

Post by ghazal » Tue Apr 09, 2024 2:05 pm

Any decent joomla template must have CSS for "table".
Cassiopeia is of course one of them. Without adding anything just using your text editor in code mode, try a class .table,
or a class "table table-striped"
or a class "table table-bordered".
Your table must be well-formed, though.

Code: Select all

<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

sthop
Joomla! Apprentice
Joomla! Apprentice
Posts: 18
Joined: Mon Aug 22, 2022 9:47 am

Re: J5 Cassiopeia: How do I get internal border-lines to show up within a Table in a published article?

Post by sthop » Wed Apr 10, 2024 7:03 am

Hello ghazal,
Thanks for your advice.
I started off with using built-in TinyMCE Editor to design my Tables. TinyMCE uses the attribute 'style' in-line per table or row.
Then, I also found some clues on the Internet which use the attribute 'class' such as class "table table-striped".
I entered these class-attributes in-line via TinyMCE code-mode.
But: in the end-result, the class-attributes overruled the style-attributes.
So, all my style-settings were present in code, but their effects did not show up in the published table. The class-attribute interfered with the style-attribute, even though the focus of 'style' was on other properties of a table, such as: width, or background-color.
Regards,
Sthop


Post Reply

Return to “Templates for Joomla! 5.x”