Right align table headers in sql-query macro

Is there a way to right-align the header rows in the table produced by sql-query macro? @Bob Swift

1 answer

Hi Chad, 

First off I will tell you that we are working on making this easier to apply these types of styles when using the SQL and other table macros. As Confluence changes we are competing on styles.  I would recommend becoming a watcher of TBL-869.  

There are a couple of ways to work around the issue. 

Add a space style and apply to your table. 

In this example we'll add a style to your space and use apply that  style to your table using the table id.

  1. Add an id to your table using the Table id parmameter on the SQL macro.  (e.g. MYTABLEID).  
  2. Add custom CSS to your space using the id above and override the th element for your table.  For instructions on setting up custom styles for your space see https://confluence.atlassian.com/doc/styling-confluence-with-css-166528400.html.  Your style should look similar to this when added to your space. 
    #MYTABLEID th {
       text-align: right;
    }
  3. That's it.  Your headers should be right-aligned.  There are many combinations to actually get the style created and applied, this is just one example. 

The advantage of this solution is depending how specific you make your CSS for the space you can easily reuse the styles across multiple tables. 

Add a custom style to your page

In this example we'll use a macro to add a custom style to the page and then apply that style to the table with a specific id on the page.  For this option you will need the HTML for Confluence macro, write your own macro, or choose one of the other macros in the Market place that lets you add CSS to a page, such as the Sytle Sheet macro that is a part of the Adaptavist Content Formatting add-on. 

  1. Add an id to your table using the Table id parmameter on the SQL macro.  (e.g. MYTABLEID).
  2. Add the HTML or other macro to your page
  3. Add the following CSS to your HTML or other macro body.  Depending on the macro you may or may not need the <styple> tags. 
    <style>
    #MYTABLEID th {
       text-align: right;
    }
    </style>

There is probably a number of other ways to get CSS applied.  This was just to name a couple.  And again, hopefully a future release of the SQL add-on will make this easier.  

Thanks! These options will help for now as I wait for the longer term fix. 

One thing to note is that what I'd really like here is the ability to right align some column headers and left align others. Really I just want the column headers to follow the data alignment. For int/num/cur columns the header should be right aligned. For string columns the header should be left aligned. Etc. 

Thanks Chad.  What you are saying makes perfect sense.   We try to make the correct alignment choice for the data based on the type.

If you'd like different styles on each header then as a work-around you could try this.  Define your style in your space styles or in your macro similar to below. You can make it more generic by removing the #MYTABLEID selector as well. 

<style>
#MYTABLEID th.cellRight {
   text-align: right;
   background-color: #f0f0f0;
}

#MYTABLEID th.cellLeft {
   text-align: left;
   background-color: #f0f0f0;
}


#MYTABLEID th.cellCenter {
   text-align: center;
   background-color: #f0f0f0;
}
</style>

Then add something like this as the Column attributes parameter in the SQL macro, one for each column:

class=confluenceTd cellLeft,class=confluenceTd cellCenter,class=confluenceTd cellRight

This does have a few side effects of using confluenceTd for each cell but I wanted to quickly show you that you can get creative with your CSS and the selectors used if you wanted to dig into it. This could probably be fixed up even better with a little time. 

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Oct 11, 2018 in Marketplace Apps

You + one app + a desert island...

Hi all! My name is Miles and I work on the Marketplace team. We’re looking for better ways to recommend and suggest apps that are truly crowd favorites, so of course we wanted to poll the Community. ...

3,681 views 6 6
Join discussion

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