How do you get rid of Confluence table gridlines?

Gabrielle Gagnon June 21, 2013

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.

5 answers

1 accepted

3 votes
Answer accepted
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
June 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;
}

Gabrielle Gagnon October 6, 2013

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.

David Arthur June 8, 2018

Where is this entered ?

Chema Guerra August 9, 2018

@David A

That's the question that's never answered unfortunately

Like # people like this
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
August 9, 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.

Erwann Loison August 10, 2018

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

Jeffrey Burr September 19, 2018

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>

 

Like # people like this
Mat Pemble November 2, 2018

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.

Like # people like this
1 vote
Gabrielle Gagnon June 24, 2013

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;}
Peter_Steven_Price October 3, 2019

ARRRGGGH THIS IS ALL SO FRUSTRATING - THIS IS EXACLTY WHAT I NEED TO DO - REMOVE BORDERS BUT NOBODY EVER POSTS THE SPECIFIC DETAILED STEP BY STEP ACTIONS TO TAKE. CAN SOMEBODY PLEASE POST THIS STARING AT PAGE EDITTING?

Like # people like this
Peter_Steven_Price October 9, 2019

OK This worked for me, BUT it then applies to all confluence tables on a page. :

 

* Bring up the page that you wish to change tables.

* Click the EDIT Button

* Click the <> button to open in Source editor.

* at the very top of this window, enter the following :

 

<ac:structured-macro ac:macro-id="34a4d729-d06d-400b-b9e8-6edfb01bd861" ac:name="style" ac:schema-version="1">
<ac:plain-text-body><![CDATA[@media all {
.wiki-content .confluenceTh,.wiki-content .confluenceTd {
border: none;
}
}
]]></ac:plain-text-body>
</ac:structured-macro

 

That should then remove borders from ALL tables in the page.

Michael Wolfe
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
October 10, 2019

Which version of Confluence are you using?  I'm on 7.0.1 and I don't see the <> button you're referring to.

Peter_Steven_Price October 10, 2019

5.9.12

Michael Wolfe
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
October 11, 2019

I think I found the missing link.  I had to install Confluence Source Editor in order to see the buttons you were referring to.

Amex4 Developers February 10, 2022

Here is the VERY SIMPLE fix to this problem.

  • Go the page that has your table.
  • Click Edit
  • Click the < > button in the upper right corner to Open the Source Editor.
  • In each <td> of your table, add  style="border: none;"  to the definitions.

Example

<td class="highlight-grey" colspan="2" data-highlight-colour="grey" style="border: none;" title="Background colour : Grey">

Problem solved!

Like Reggie Robertson likes this
Jane Bentley December 8, 2023

this works great - thanks so much for easy explanation

except

next time I edit the page, it seems to default back to normal setting

is there any way to make it stick please ?

1 vote
Bob Swift OSS (Bob Swift Atlassian Apps)
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 21, 2013

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

Gabrielle Gagnon June 23, 2013

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.

Martin Cleaver
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 16, 2014

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

Bob Swift OSS (Bob Swift Atlassian Apps)
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 16, 2014

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.

0 votes
Damien Carr October 15, 2023

@Jeffrey Burr Hi Jeffery, regarding your above code, how do I make the table border color = BLACK, please? Thanks, Damien.

0 votes
christianvecchiola March 23, 2020

Hello everyone, I come a little bit late to the party but another possible option would be to simply define a CSS Wrapper User Macro as follows:

## Macro title: CSS Wrapper
## Macro has a body: Y
## Body processing: Rendered
## Output: Selected output option
##
## Developed by: Christian Vecchiola
## Date created: 24/03/2020
## Installed by: Christian Vecchiola

## This is an example macro
## @param Id:title=Identifier|type=string|required=false|desc=Value of the id attribute of the div tag.
## @param Style:title=Inline Style|type=string|required=false|desc=Inline CSS style options.
## @param Class:title=CSS Class|type=string|required=false|desc=CSS class attribution for the wrapper div.

<div id="$paramId" style="$paramStyle" class="$paramClass">$body</div>

This allows you to selectively style the content of the div via CSS custom style sheet of the of the space, by using the method suggested by @[deleted]. The advantages are:

  • you don't need to activate the general HTML macro setting
  • you don't need to install any other additional and pricey macro
  • you can customise not only table but anything you like

Disadvantages obviously are that you still need to be a Confluence administrator. I believe that given the simple text of the macro which is a div with no Javascript it might be easier to pass it through.

Here is an example of how I used the macro do a static horizontal navigation menu:

Custom Styling.pngThis is essentially a table which is edited with the standard editor of Confluence.

christianvecchiola March 23, 2020

and also.... you don't need to install the confluence editor anymore... :D

Bonnie Lopes June 18, 2021

@christianvecchiola , Do you have a sample of what the parameters are set to make  the boarder style none and where does this macro get placed on the page in relation to the table.  I don't seem to be able to insert, Like nest the table inside this macro.

I do not know CSS, so not sure, how to translate the parameters ID, Style, class back to 

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

 

 AM I correct, that this would change every table on the page, but not every table within the space?

christianvecchiola June 22, 2021

@Bonnie Lopes the Style parameter is a string that can be used to see the CSS properties of the containing div. Here is an example of how it can be used: https://www.w3schools.com/tags/att_style.asp.

In this particular case the it won't be helpful because the DIV contains the table and therefore anything you set via the style attribute will be applied to the DIV and not to the children that the div contains (i.e. the table).

the Class parameter provides you with the ability of referencing a class for the DIV the element that you must define in the style sheet section of confluence. This is to offload a lot of style settings to a CSS file.

I guess that what you have showed above might work (I assume you are placing these directives in the CSS file of confluence and `confluenceTd` and `confluenceTh` relate to the styles used for the table header and table column), but it has the disadvantage of applying this to all the tables in your wiki.

If you are trying to selectively apply the style control to specific tables, wrapping your table in a div with a macro as described above may work better. For instance if you want to only apply the style without border to only certain tables you can do the following:

  • define the class name `noTableLines` in the CSS stylesheet section of confluence with the following rules:
.wikiContent .noTableLines .confluenceTh, 
.wikiContent .noTableLines .confluenceTd {
border: none;
}
  • define the macro I mentioned above in confluence and use it where you want to have a table without lines, by setting the Class parameter to `noTableLines`.
Bonnie Lopes June 28, 2021

@christianvecchiola , thank you for responding, I am having difficulty know where to place the wrapper and how to nest my table.  So I am just trying to remove the lines for the table that sits with a UI Tab macro. But the wrapper doesn't seem to let me nest other Macros in it. The UI Image and Steps are in a table.  It is this table, I want to remove the table lines, so the image and the steps float within the tab

CSS Wrapper.jpg

When rendered, if just inserts $body

rendered CSS wrapper.jpg

Amex4 Developers February 10, 2022

I finally figured out the VERY SIMPLE fix to this nagging problem.

  1. Go the page that has your table.
  2. Click Edit
  3. Click the < > button in the upper right corner to Open the Source Editor.
  4. In each <td> of your table, add  style="border: none;"  to the definitions.

Example

<td class="highlight-grey" colspan="2" data-highlight-colour="grey" style="border: none;" title="Background colour : Grey">

Problem solved!

Clara Holmes June 23, 2022

I do it by adding a CSS Stylesheet macro (you can find it under other macros) to the page. Typing in all in the media field. Then typing in

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

into the CSS Stylesheet and that makes all the borders dissappear for all of your tables on that page!

You cannot see the CSS Stylesheet when publishing, only in the editing mode.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events