Add style to specific columns or rows in your Table view

Follow

Comments

17 comments

  • Avatar
    Muhammed Aadhil (Edited )
    But what I got is only fixed row

    tbody>:nth-child(2){
    color:red;
    font-weight: bold;
    }

    What I want is if the cells contain the word Today in column A, I want the respective rows to be highlighted in green.

    Can you help me to modify the above code? it would be really helpful and easy my task.

    Thanks
     
     
  • Avatar
    Awesome Table

    Hello Muhammed Aadhil,

    In this way, I suggest you follow this article about the conditional display. It will be helpful in your case.

    Kind regards,
    Thomas

  • Avatar
    siri gowtham

    This example shows :nth-child(2) for a specific row.
    How would it work for a column?

  • Avatar
    Awesome Table

    Hello siri gowtham,

    If you want to customize a specific column, you just need to apply the change in this section of this article. Actually, to make a change in the second column, you just need to apply this code:

    tbody>tr>:nth-child(2){
    color:red;
    width:200px;
    text-align:center;
    }

    Kind regards,
    Thomas

  • Avatar
    Administrador Superligatenis

    Hi, 

    I would like to format content of column B (text) in bold if the value of column A(number) is odd and format the content of column C(text) if the value of the column A(number) is even. 

    Is this possible?

    Thanks.

     

  • Avatar
    Awesome Table

    Hello,

    We have an article on how to have style depending on specific values. However there is not way to have style depending of an odd or even number.

    Nicolas

  • Avatar
    Charles Riebeling

    Hi there, 

    I'm able to change the content of the table, but I need to also change the header. What would the nth child code look like to change both the table content as well as the header?

    Thanks!

    Charlie

  • Avatar
    Awesome Table

    Hello Charles,

    It would look like this :

    thead th:nth-child(your_param){

         /*your css*/

    }

    I hope this helps you.

    Nicolas

  • Avatar
    Charles Riebeling

    This worked perfectly. Thank you for your help!

    Charlie

  • Avatar
    Davidaramos77

    What about using it for more than 1 column?

  • Avatar
    Nicolas Gauvin

    Hello Davidaramos77,

    You can select several columns by separation the CSS selector with ",".

    i.e:

    tbody>tr>:nth-child(your_parameter),tbody>tr>:nth-child(your_second_parameter){ 
    /* your css here */
    }

    I hope this helps,

    Regards,

    Nicolas

  • Avatar
    Alexandra Wingate

    Hi,

    I'm trying to adjust the width of table columns when a sidebar is present as well. I can get the text color to change, but not the width. Thanks!

     

    Alex

  • Avatar
    Thomas Morin

    Hello Alexandra Wingate,

    It is definitely possible to change the width of your column when you use a sidebar view but it requires knowledge in code.

    For example, if you want to change the width of your sidebar column left, here is the percentage in the code you need to change:

    You can also change the width of your sidebar right column with the percentage in the code:

    However, we don't recommend to achieve that because if we make some changes in the native code, it will affect your view.

    Thank you for your understanding.

    Thomas

  • Avatar
    Martin Jallinder

    Hi,

     

    I am trying to change a header format by using the following CSS:

    The CSS is pulled from my google sheet, and it works perfectly to change colums (with tbody>td> example given in this article), but not the header row.

     

    <style>

    thead>th>:nth-child(4){
    color:blue;
    text-align:center;
    }

     

    Unfortunately it's not working.

    Is there anything wrong in my code?

    I got it from an example given in December.

  • Avatar
    Thomas Morin

    Hello Martin,

    I suggest you inspect the code and you copy and paste the corresponding CSS class in your template sheet. Then, you will just need to change the code.

    If you need further information, please, create a ticket on our platform. It will be easier to discuss with you.

    Kind regards.

    Thomas

  • Avatar
    Omq

    I can´t change the widht for a column, with this code can you help me please?

  • Avatar
    Nicolas Gauvin

    Hello Omq,

    This is not the right place to put your code.

    Please have a look at this section of the documentation on how to set up a template:https://support.awesome-table.com/hc/en-us/sections/115001257645-Create-your-first-Awesome-Table-template

     

Please sign in to leave a comment.