General information

The Stylesheet tab is available from the Table Filter, Charts & Spreadsheets 10.4.0 version.

Table Transformer supports the Stylesheet tab feature allowing to adjust the table display&styling with CSS(Cascading Style Sheets). 

To be able to indicate the CSS rule correctly the corresponding syntax  needs to be followed.

Below you can find a number of use cases depicting how Stylesheet tab helps to enhance&alter the table display in Confluence by adjusting its HTML elements, i.e. selectors. 

Use cases

Changing background color

Use case: 

You need to adjust the background color of either entire table or the header row.

Solution:

  1. Switch the page to the edit mode.

  2. Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.

  3. Select the macro and click Edit.

  4. In the Stylesheet tab enter any of the following CSS:

    th {background-color:red;} /* Adjusts the background color of the header row */

tr {background-color:yellow;} /* Adjusts the background color of the table rows */
    CSS

  5. Click Next. 

  6. Save the macro and the page.

Changing border styles

Use case: 

You need to adjust the border style(color, width, sides) of the table.

Solution:

  1. Switch the page to the edit mode.

  2. Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.

  3. Select the macro and click Edit.

  4. In the Stylesheet tab enter any of the following CSS:

    table {border:3px solid #C1C7D0;} /* Fully adjusts the border style of the entire table */

th {border-width: 5px;} /* Adjusts the border width of the header row */

td {border-color: white} /* Adjusts the border color of the table cells by visually removing them */td {border: none} /* Completely removes the border of the table cells */
    CSS

  5. Click Next. 

  6. Save the macro and the page.

Bordering of the table entails various display forms that can change the table look even further. For example, one of the most commonly used staircase-like table display can also be configured via CSS within the Stylesheet Tab. 

Altering margin and padding

Use case: 

You need to adjust margin or padding of the table.

Solution:

  1. Switch the page to the edit mode.

  2. Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.

  3. Select the macro and click Edit.

  4. In the Stylesheet tab enter any of the following CSS:

    table {margin:5px 50px 50px 50px} /* Fully adjusts the margin of the entire table */

td {padding:5px 50px 5px 50px} /* Adjusts the padding of the table cells */
    CSS

  5. Click Next. 

  6. Save the macro and the page.

Changing height and width

Use case: 

You need to adjust height/width of the table cells.

Solution:

  1. Switch the page to the edit mode.

  2. Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.

  3. Select the macro and click Edit.

  4. In the Stylesheet tab enter any of the following CSS:

    td {width:200px; height:50px;} /* Adjusts the height and width of the table cells */

th {height:80px;} /* Adjusts the height of the header row cells */
    CSS

  5. Click Next. 

  6. Save the macro and the page.

Altering fonts

Use case: 

You need to adjust fonts(size, style, family) of the table.

Solution:

  1. Switch the page to the edit mode.

  2. Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.

  3. Select the macro and click Edit.

  4. In the Stylesheet tab enter any of the following CSS:

    th {font: 15px Monaco, Monospace;} /* Adjust the font in the header row */

tr:nth-child(1) {font: 15px Papyrus, Fantasy;} /* Adjust the font in the first row */

tr:nth-child(2) {font: 15px Georgia, Serif;} /* Adjust the font in the second row */

tr:nth-child(3) {font: 20px Helvetica, Sans-serif;} /* Adjust the font in the third row */

tr:nth-child(4) {font: 25px Lucida Handwriting, Cursive;} /*Adjust the font in the fourth row */
    CSS

  5. Click Next. 

  6. Save the macro and the page.

Changing alignment

Use case: 

You need to adjust alignment of the table data.

Solution:

  1. Switch the page to the edit mode.

  2. Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.

  3. Select the macro and click Edit.

  4. In the Stylesheet tab enter any of the following CSS:

    th {text-align: center;} /* Aligns the header rows data centered */

td {text-align: left;} /* Aligns the table rows data to the right */

td {width: 100px;} 
/* Adjusts the width of the table rows  for better alignment display - Optional */
    CSS

  5. Click Next. 

  6. Save the macro and the page.

Styling specific columns

Use case: 

You need to adjust the styling of the specific columns.

Solution:

  1. Switch the page to the edit mode.

  2. Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.

  3. Select the macro and click Edit.

  4. In the Stylesheet tab enter any of the following CSS:

     th:nth-child(odd), td:nth-child(odd) {background-color:yellow;}
/* Styles all odd column names and column cells */

th:nth-child(even), td:nth-child(even) {background-color:green;} 
/* Styles all even column names and column cells */

th:nth-child(5), td:nth-child(5) {background-color:red;} 
/* Styles the 5th column name and column cells */

th:nth-child(n+6),td:nth-child(n+6) {background-color:blue;} 
/* Styles the 6th and all following column names and cells */
    CSS

  5. Click Next. 

  6. Save the macro and the page.

More examples involving the :nth-child pseudo-class are available in the following article.

Styling specific rows

Use case: 

You need to adjust the styling of the specific rows.

Solution:

  1. Switch the page to the edit mode.

  2. Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.

  3. Select the macro and click Edit.

  4. In the Stylesheet tab enter any of the following CSS:

    th {font: 15px Verdana;} /* Styles the header row */

tr:nth-child(odd) {background-color:yellow;} /* Styles all odd rows */

tr:nth-child(even) {background-color:red;} /* Styles all even rows */

tr:nth-child(5) {background-color:blue;} /* Styles the 5th row*/

tr:nth-child(n+6) {background-color:green;} /* Styles the 6th and all following rows */
    CSS

  5. Click Next. 

  6. Save the macro and the page.

More examples involving the :nth-child pseudo-class are available in the following article.

Creating hoverable cells

Use case: 

You need to change the cells display by hovering over them.

Solution:

  1. Switch the page to the edit mode.

  2. Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.

  3. Select the macro and click Edit.

  4. In the Stylesheet tab enter any of the following CSS:

    td:hover {background-color: yellow; font-size:20px; color:red;} 
/* Changes the cell color, text size and color upon hovering over it */

tr:hover {background-color: pink;} 
/* Changes the row color upon hovering over it */
    CSS

  5. Click Next. 

  6. Save the macro and the page.

Hiding the output elements - Jira Issues Count

CSS enables you to visually remove specific classes/elements from the output via the display property- the rule just needs right classes/elements for the input, which can be located in the HTML markup of the web page.

Use case: 

You need to hide the Refresher-button of the Jira Issues macro output inside table cells.

Solution:

  1. Switch the page to the edit mode.

  2. Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.

  3. Select the macro and click Edit.

  4. In the Stylesheet tab enter the following CSS:

    .refresh-issues-bottom {display:none;}
    CSS

  5. Click Next. 

  6. Save the macro and the page.