If you want to customise 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 into 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 into 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 into 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 into 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 into 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 into 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

1. Change the width of a column based on the iframe width

By default, the table app always fits the iframe width. It means that as soon as all columns fit in the table, the 'remaining width' is given to columns with large content and/or specific CSS rules.

So depending on the 'remaining width' value, columns with specific width requirements are updated to a new width somewhere between the minimum width and the width set in the rules. 

To change the width of a column, target the parent inside the table element with the following CSS:

.google-visualization-table-th:nth-child(8)  {
width: 400px;
}

Example of a Table app containing one column with a larger width

2. Change the width of a column without taking the iframe width into account

In the Template sheet, create a new column and add the following HTML code:

<div class="fixed-width">
    {{Any column Header}}
</div>

And in the <style> column simply set the width:

.fixed-width{
   width: 400px;
}

In our example, our column Header is named "Deadline".

Here’s an example of how that looks:

Also, if you want to display fewer columns, the table will fill the app width by default, making the column larger than requested.

In that case, to choose the width of your column, add a line of CSS under <style> column targeting the table:

.google-visualization-table {
   width: fit-content!important;
}

Here’s an example of how that looks: