Add style to specific columns or rows in your Table view

Follow

Comments

11 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

Please sign in to leave a comment.