Add style to specific columns or rows in your Table view

Follow

Comments

22 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
     
     
    0
    Comment actions Permalink
  • 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

    0
    Comment actions Permalink
  • Avatar
    siri gowtham

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

    0
    Comment actions Permalink
  • 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

    0
    Comment actions Permalink
  • 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.

     

    0
    Comment actions Permalink
  • 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

    0
    Comment actions Permalink
  • 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

    0
    Comment actions Permalink
  • Avatar
    Awesome Table

    Hello Charles,

    It would look like this :

    thead th:nth-child(your_param){

         /*your css*/

    }

    I hope this helps you.

    Nicolas

    0
    Comment actions Permalink
  • Avatar
    Charles Riebeling

    This worked perfectly. Thank you for your help!

    Charlie

    0
    Comment actions Permalink
  • Avatar
    Davidaramos77

    What about using it for more than 1 column?

    0
    Comment actions Permalink
  • 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

    0
    Comment actions Permalink
  • 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

    0
    Comment actions Permalink
  • 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

    0
    Comment actions Permalink
  • 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.

    0
    Comment actions Permalink
  • 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

    0
    Comment actions Permalink
  • Avatar
    Omq

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

    0
    Comment actions Permalink
  • 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

     

    0
    Comment actions Permalink
  • Avatar
    Angel Christian

    Hi, 

    Is there an option to automatically restrict column widths and word wrap headers and body text for all columns and rows in the table?

    0
    Comment actions Permalink
  • Avatar
    Randolph Abelardo

    Hi @Angel.

    There's currently no automatic option to configure the column widths and wrap headers. I encourage you to submit a Feature Request to our Dev Team. 


    - Randy

    0
    Comment actions Permalink
  • Avatar
    Angel Christian

    Hi Randolph,

    Thank you. Are there any CSS templates that would help me to adjust column widths and wrap header/body text?

    0
    Comment actions Permalink
  • Avatar
    Randolph Abelardo

    Hi @Angel.

    You can use the combo below to achieve your goal:

    Since the Table view uses a responsive layout. I recommend trying out the preserving-spaces tip first to see if you like how the headers and in-cell content wraps before applying the style to specific column tip.

    Alternatively, you can just manually relabel the header to shorten it or rename the header using a Query statement.

    Hope this helps.


    - Randy

     

     

    0
    Comment actions Permalink
  • Avatar
    Niels Henrik Bruun

    Hi

    I like this post.

    But how would you use css3 to style a specific cell in a table?

    Or rather, style all cells individually?

    Regards nhb

    0
    Comment actions Permalink

Please sign in to leave a comment.