Download PDF
Download page Stylesheet tab - altering table display with CSS.
Stylesheet tab - altering table display with CSS
General information
The Stylesheet tab is available from the Table Filter, Charts & Spreadsheets 10.4.0 version.
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:
Switch the page to the edit mode.
Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.
Select the macro and click Edit.
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 */
CSSClick Next.
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:
Switch the page to the edit mode.
Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.
Select the macro and click Edit.
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 */
CSSClick Next.
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:
Switch the page to the edit mode.
Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.
Select the macro and click Edit.
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 */
CSSClick Next.
Save the macro and the page.
Changing height and width
Use case:
You need to adjust height/width of the table cells.
Solution:
Switch the page to the edit mode.
Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.
Select the macro and click Edit.
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 */
CSSClick Next.
Save the macro and the page.
Altering fonts
Use case:
You need to adjust fonts(size, style, family) of the table.
Solution:
Switch the page to the edit mode.
Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.
Select the macro and click Edit.
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 */
CSSClick Next.
Save the macro and the page.
Changing alignment
Use case:
You need to adjust alignment of the table data.
Solution:
Switch the page to the edit mode.
Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.
Select the macro and click Edit.
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 */
CSSClick Next.
Save the macro and the page.
Styling specific columns
Use case:
You need to adjust the styling of the specific columns.
Solution:
Switch the page to the edit mode.
Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.
Select the macro and click Edit.
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 */
CSSClick Next.
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:
Switch the page to the edit mode.
Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.
Select the macro and click Edit.
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 */
CSSClick Next.
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:
Switch the page to the edit mode.
Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.
Select the macro and click Edit.
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 */
CSSClick Next.
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:
Switch the page to the edit mode.
Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.
Select the macro and click Edit.
In the Stylesheet tab enter the following CSS:
.refresh-issues-bottom {display:none;}
CSSClick Next.
Save the macro and the page.