Right align table headers in sql-query macro

[Chad Peters]

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

[Jeff Pierce _Appfire_]

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.  

[Chad Peters]

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. 

[Jeff Pierce _Appfire_]

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.