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

[sthop]

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

[Per Yngve Berg]

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

[AlCher]

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>

[Pavel-ww]

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]

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]

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]

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