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;
}

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;
}

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;
}

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.