How do you get rid of Confluence table gridlines?

We're putting our procedures in Tip macros, to set them off visually on the page, and we're using tables to keep instructions aligned with screen shots. The problem is that Confluence tables have gray gridlines, which stand out against the light green background of the Tip macro. We want to change the color of the table grid to match the background of the Tip macro ({color: rgb(243,249,244);}) so the table is invisible.

Can someone tell me which CSS selector or style I can use to override the Confluence table gridlines?

I'm a space administrator, not a site administrator, so I don't have access to the CSS stylesheets. However, we do have a CSS stylesheet macro (I don't know the vendor) I can use to override the table style on just those procedure pages.

If the Tip macro has a named style, it would be nice to apply that to the tables instead of coding in the color, so we wouldn't have to change all the procedure pages if the color changes.

Any other suggestions on how to make the gridlines invisible are welcome.

4 answers

1 accepted

3 votes
Accepted answer
Sean Curtis Atlassian Team Jun 26, 2013

Gabrielle I'd recommend against a blanket selector targeting all table/td elements - better off scoping it so you don't affect any other tables used outside the bounts of the page content. Something like this is safer:

.wiki-content .confluenceTh,
.wiki-content .confluenceTd {
    border: none;
}

Thank you. I knew my solution was too broad, because it did wipe out outlines for other tables on pages where I inserted the modified table (using the include-page macro), but I couldn't find anything better. This was exactly what I was looking for.

Where is this entered ?

@David A

That's the question that's never answered unfortunately

Sean Curtis Atlassian Team Aug 09, 2018

For Confluence Cloud I don't think you'd be able to do this (Connect addons do not have access to mount styles which affect the main markup/styles of the site). For Confluence Server, you could write a P2 plugin, or if you have admin access there's a "hacky" way to do this to every page by adding a <style> block to the announcement banner.

Well this is a shame. And $10 a month for an advanced table macro is even more.

Put it inside an HTML macro.

All CSS and even javascript works on a page if you just insert an HTML macro into the page, then insert the code inside of it.

For CSS all you need is:

<style>

.wiki-content
.confluenceTh, .wiki-content .confluenceTd { border: none; }

</style>

 

Alternatively, for Confluence Cloud, to add inline CSS to any page just insert a "Style" macro. Leave the "media" and "import" boxes empty and click save.

Then add the CSS code within the border of the grey Style macro box while editing your Confluence page.

.wiki-content .confluenceTh,.wiki-content .confluenceTd {
    border: none;
}

(you don't need the <STYLE> tags if you use this type of macro).

Publish and you should see the changes.

At least one way to do this is with the Table-plus macro. An example is described in Example - column styling

Bob, this looks like a great macro, but my company has gotten burned with 3rd-party plugins in the past, and now the only new plugins it permits are free, Atlassian-issued macros -- and even those take months to approve sometimes. I'm afraid it's not a solution for me.

Can your Table Plugin affect how a table is printed? I need the grid lines to show.

Yes, for table level styles. No for row and column styles and attributes that are applied via javascript if you are talking about PDF output. Browser based print should handle both.

I found the answer to my own question on the w3schools.com website. There is an excellent reference on CSS style syntax at http://www.w3schools.com/css

In my case, I just needed to enter the following style override:

table, td {border-style: none !important;}

But if I wanted a border, I would have overriden it with:
table, td {border-style: solid; border-color: rgb(243,249,244) !important;}

We highly recommend Tzunami for easy content migration. Learn more about the tool here: http://www.tzunami.com/products/td-confluence-migration/. Tzunami is a leading provider of Migration solutions for enterprises of all sizes. As the pioneers of content migration, Tzunami enables seamless migration from over 15 legacy systems. Tzunami Deployer saves up to 90% of traditional migration time – lowering costs and maximizing return on investment. Feel free to try an evaluation version of the software at no cost at http://www.tzunami.com/downloadevaluation/

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Nov 29, 2018 in New to Confluence

How to use Confluence Cloud for stakeholder management

Most of us don’t need much convincing that stakeholder management is important. It just makes sense that keeping everyone in-the-know on projects and assigning clearly defined roles is key to having ...

1,132 views 2 6
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you