How to overwrite default Joomla CSS for tables

I need some detailed help to overwrite the default settings for tables in Joomla CSS

I have a concrete example on:

Towards the top of the article I have 2 colums that I have made with a customized plugin.
As you see it has a border on the left

It takes the settings from

.art-article th, .art-article td
  border-left: solid 1px #000000;

Below that again I have a new table with pictures
They are made in a table as well, and as you see, it applies the boarder on the left from above setting in CSS.

I have read alot about this on the net and forum and it sounds so simple
I have tried to add several things to the CSS file but it does not appear as "style" in my JCE editor so I can not apply it
I think its because i dont understand the different from
etc... Its still like a jungle for me :)

So if anyone can help me to what to enter ti CSS file so I can easy apply it in the editor.
Preferable so I can use the drop down "style" in my editor to apply it

Hope someone can help me

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Allan NisbetOwner at Storm IT Solutions LTDCommented:

The simplest solution to this is to assign an ID to the <td> like <td id="leftcolumn">

Then use your border code and instead of a left border use

#leftcolumn {

border-right: solid 1px black;


Open in new window

Hope this helps

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Do you want the border on just the table or do you want the border on each column as it shows now?
morten444Author Commented:
Thanks For your advice
Yes what I want to do is to remove all borders around the table that has all the staff members.

I managed to acheve that now by adding

#leftcolumn {
border-right: 0px;
border-left:  0px;


2 questions
I wanted to get this option "leftcolumn" to appear in the "style" drop down in JCE editor.
but its not there. Do you know what I need to do to get it there?

The site is for someone that dont want to "code" and I have done a site long time ago where that worked. I have just no idea what I am doing different now

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

To make it appear in the drop down there, you will need to duplicate the style in the file:


Open in new window

morten444Author Commented:
Hm I dont have that file. I am using Artisteer to create the template
I am using JCE editor

I know that it should be possible to add it in CSS file and then it should appear in Style automatically as its looking in the CSS files for styles. is it not?
I know that statement in CSS can be

In the test you gave me i used #font

Can I add the same code to CSS just using Class in stead?

How to add Class to CSS
and how activate it in the article

Sorry for lack of knowledge.. I just still need som "ping" experiences in all this consepts in CSS as I am a little lost!!

Thanks for patient

morten444Author Commented:
Hi. Thanks
This fixed the problem. Have not resolved how to get them directly into "styles" in the editor
I think its just to add right type of css to the css file, then it will appear. I have done it one year ago and it was there automatically. Just cant remember how

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.