Use CSS to change the style of each row depending on the content




  • Avatar
    Charles Riebeling

    How would this code look if I want to change formatting using the table formatting. For example, if I wanted to change the value in column B red depending on the corresponding value in column A.



  • Avatar
    Awesome Table

    Hello Charles,

    If you have two columns, "Content" and "Color". You could set up a template on the "Content" column that would look like that:

    <p data-color="{{Color}}" class="content">{{Content}}</p>
    .content[data-color="red"] {
    color : red

    .content[data-color="green"] {
    color : green

    If you need any further assistance, please  create a ticket so I can give you more help.




  • Avatar
    Eric Johnston

    ^ Charle's comment. On the Template tab of the spreadsheet, what would the column header be for the code?


    I'm trying to make everything in the Content column be bold in the Awesome Table but only certain rows be a color based on the color column and I can not get it to work.  

  • Avatar

    Hi, All the examples here are form the = (equal) condition.

    How do I change the color of a cell if the value is less than 0, is this possible?

    I need to change color to red if a value in the column "AMOUNT" is less than 0.



  • Avatar
    Nicolas Gauvin

    Hello Eric, 

    You would need 3 columns:

    • "Color": This column would have colors as data (color names like "red" or hex codes like "#ffffff)
    • "Content": This column would have your text content
    • "Template": This column should not have anything as its data (just the header).

    In your template sheet create a column with "Template" as the header and the following as the second row:

    <p data-color="{{Color}}" class="content">{{Content}}</p>

    What to keep in mind:

    • Make sure that all your columns are within the data range in DATA SOURCE > Range
    • Make sure that your template is included in ADVANCED PARAMETERS > Templates Range
    • You can change the names "Color", "Content" and "Template" but make sure to replicate the change everywhere
    • You might want to hide the "Color" and "Content" columns as they are already used/displayed in the "Template" column. Please use the "Hidden"  keyword

    Please let me know if you need further help.



  • Avatar
    Nicolas Gauvin

    Hello PADC,

    This is unfortunately not possible with Awesome Table.


  • Avatar

    Thanks Nicolas Gauvin.


    I found a workaround using:


    Thank you.

  • Avatar
    'Nikolas Voniatis (Edited )

    Hello, a bit of a rookie question but i am not that familiar to CSS coding at all :P 
    I would like to have a google form with many paths, thus leaving some empty columns (and hiding them from the awesome table) due to each path having other pre-requisites. 

    Sheet Example:
    - Column A: Has value >> Display
    - Column B: Empty >> Do not display
    - Column C: Has Value >> Display

    Preview Example:
    - A: {{column A}}
    - C: {{column C}}

    Probably it will have something to do with an IF variable, but i don't have any idea how to implement this.  Any help would be appreciated!


  • Avatar
    Thomas Morin

    Hello Nikolas Voniatis,

    I suggest you follow this method using queries.
    Just need to consult the #Task 13 and import the method with the relevant column.

    Kind regards.


Please sign in to leave a comment.