Your use cases or needs require to style specific columns or rows (or its contents). With the Table visualization type, you can display them in a certain way. In this article, you’ll learn simple CSS tricks to personalize your columns and rows.
1. Using CSS3 :nth-child() selector
If you want to apply a style to a specific column or row (but not on others), use :nth-child() property from CSS3. This selector is used to apply a style to the element number ‘n’ inside a parent element.
You can use :nth-child() in several ways:
- :nth-child(3) - use a number as a parameter to specify a style for the third element (for example).
- :nth-child(odd) or :nth-child(even) - use 'odd' or 'even' as a parameter to specify style for all odd or even elements.
- :nth-child(4n) - use a 'number n' as a parameter to specify the style to every 4th cycle of the element (e.g. highlight the table's 4th row in red, then the next 4th row after, ...).
2. Apply style to specific columns
To add style to specific columns, use the following selector in your CSS:
1 2 3 |
tbody>tr>:nth-child(your_parameter){
|
Here is a simple example (changing the font color, the alignment and the width of the second column):
1 2 3 |
tbody>tr>:nth-child(2){
|
3. Apply style to specific rows
To add style to specific columns, use the following selector in your CSS:
1 2 3 |
tbody>:nth-child(your_parameter){
|
Here is a simple example (changing the font color and the font size of the second row):
1 2 3 |
tbody>:nth-child(2){
|
Comments
25 comments
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
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
This example shows :nth-child(2) for a specific row.
How would it work for a column?
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
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.
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
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
Hello Charles,
It would look like this :
thead th:nth-child(your_param){
/*your css*/
}
I hope this helps you.
Nicolas
This worked perfectly. Thank you for your help!
Charlie
What about using it for more than 1 column?
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
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
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
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.
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
I can´t change the widht for a column, with this code can you help me please?
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
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?
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
Hi Randolph,
Thank you. Are there any CSS templates that would help me to adjust column widths and wrap header/body text?
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
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
HI There,
Using this code in my template and the width is not reading - any insight :)
/*** CSS for Awesome Table Gadget***/
.google-visualization-table-table .gradient, .google-visualization-table-div-page .gradient { background: #FF0000!important; color: #FFFFFF!important; font-size:12.5px!important; }
tbody>tr>:nth-child(5){ width:600px; }
/* Modify text font-size and alignment */
.google-visualization-table-table { text-align:left; font-size:12px!important; } .date { text-align: center; }
Hi Amy Adams Horvath,
At the moment changing width of the column is not working as intended and our development team is looking into improvements.
Sorry for this.
Hi Niels Henrik Bruun,
You can change the colour of the cell based on its content. Please check our article here.
Cheerio!
Dear all,
I need to change the color font of a few words within a cell. I don't want to color a whole column or row, but just some words within all rows of the same column. Is that possible?
Thanks!
PS. Actually, here I see exactly what I'm looking for: https://support.awesome-table.com/hc/en-us/articles/115001045869-All-available-keywords-to-present-your-data
In your keyword tables (I guess it was done with Awesome table!) I see that only certain words are in bold. If color is not possible, bold or italics would be nice too.
Please sign in to leave a comment.