Add style to specific columns or rows in your Table view

Follow

Comments

6 comments

  • Avatar
    Nahdi Lazar (Edited )

    Question - what if I want to set a different CSS to a row based on its content and not on its position in the table? Meaning, that in the example shown above, only "Game of Thrones" will be highlighted, no matter where it appears in the table, while other entries holding the 2nd position won't be highlighted at all.

    Would be helpful to be able to assign row specific CSS, or at least background color, using a keyword in a designated column in the sheets.

    Any other ideas?

  • Avatar
    Awesome Table

    Hello Nahdi Nazar,

    Given your request I think you should read this article instead. You need to change the items in function of the content.

    Kind regards,
    Thomas

  • Avatar
    Nahdi Lazar

    Thank you Thomas, 

    but as far as I understand, the article you linked to allows defining CSS for a specific element in a table.
    I'm not sure I understand how to use it to change the background-color of a whole row, or even a single cell in a table (unless I'm using the card view).

    Can you help? Thanks.

  • Avatar
    Awesome Table

    Hello Nahdi Lazar,

    Would it be possible for your to share your view and your spreadsheet at "support@awesome-table.com"? If you have sensitive data, you can make a copy with similar data.

    Just make sure you give us access to your data.

    Kind regards,
    Thomas

     
  • Avatar
    Oleg Klotschenok

    Hello Thomas!

    Could you explain, how to highlight rows depends on the data. For example: all rows should be highlighted where

    Tv show name = "Game of Thrones"

    It's the same question as Nahdi Nazar asked.

    Thank you

    Best Regards

    Oleg

  • Avatar
    Awesome Table

    Hi Oleg Klotschenok,

    Sorry for the delay of the response!

    I suggest you change the CSS with "background-color".

    For example, if you want to highlight text in the second row, you just need to use this code:

    tbody>:nth-child(2) {

    background-color:red!important;

    }

    Kind regards,
    Thomas

Please sign in to leave a comment.