If you want to customize your Table app using CSS in your template sheet, this article provides a list of the main snippets of CSS code you might need.
2
Customize your titles
Keep the header fixed on scroll
To make your app scrollable with a fixed header, copy the following code and paste it in your Template sheet:
.google-visualization-table div {
height: 300px;
}
Example of a Table app with a fixed header on scroll
Change the font color of titles
To change the font color of the titles in your app, copy the following code and paste it in your Template sheet:
th {
color: red!important;
}
- the name of the color, for example: yellow, red, blue
- the hex color code, for example: #FFFF00, #FF0000, #0000FF
Example of a Table app with a red header font color
Change the background color of titles
To change the background color of the titles in your app, copy the following code and paste it in your Template sheet:
.google-visualization-table-th.gradient {
background:yellow!important;
}
- the name of the color, for example: yellow, red, blue
- the hex color code, for example: #FFFF00, #FF0000, #0000FF
Example of a Table app with a yellow header background
Change the alignment of titles
To change the alignment of the titles in your app, copy the following code and paste it in your Template sheet:
.google-visualization-table-th {
text-align: right;
}
Example of a Table app with a right-aligned header
Change the font of titles
To change the font of the titles in your app, copy this code:
th { font-family: 'quicksand', sans-serif; }
Example of a Table app with font style for the titles: 'quicksand', sans-serif;
Customize your content
Change the content font color
To change the font color, copy the following code and paste it in your Template sheet:
td {
color: blue;
}
- the name of the color, for example: yellow, red, blue
- the hex color code, for example: #FFFF00, #FF0000, #0000FF
Example of a Table app with a blue font color
Change the content alignment
To change the content alignment, copy the following code and paste it in your Template sheet:
td {
text-align: right;
}
Example of a Table app with a right content alignment
Other customizations
Change the table font
Add a Google font (for example) in your Head template. Add it to the table:
.google-visualization-table-table { font-family: 'quicksand', sans-serif; }
Example of a Table app with content font style 'quicksand', sans-serif;
Change the width of a column
To change the width of a column, copy the following code and paste it in your Template sheet:
.google-visualization-table-th:nth-child(1){ width: 400px; }
To change the width of more than one column, copy this code:
.google-visualization-table-th:nth-child(-n+2){ width: 400px; }
In our example, we changed the width of the first two columns.
Comments
0 comments
Please sign in to leave a comment.