Custom CSS styles not applied to specific columns

πŸ’¬ App Building
1
  1. I want to apply custom styles to the table and the components inside it, rows and columns.
  2. I added custom styles to the table itself and they were applied. I accessed the columns directly and everything worked, but when I accessed specific columns, they were not applied.
  3. My Retool is on my server

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2025-08-28 123626
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2025-08-28 1236261292Γ—714 54.8 KB

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2025-08-28 123616
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2025-08-28 123616710Γ—325 26.9 KB

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2025-08-28 123527
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2025-08-28 1235271306Γ—660 65.2 KB

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2025-08-28 123513

2

Hello @Timur_Tuhtaev,

I checked the issue and have a solution. Instead of targeting column names, you can style the table using column numbers β€” this works effectively in Retool tables. Here’s an example along with a screenshot and CSS:

[data-testid="table11"] [role=""]:nth-child(1),
[data-testid="table11"] [role="gridcell"]:nth-child(1) {
  background: #f5f5f5 !important;
}

[data-testid="table11"] [role=""]:nth-child(3),
[data-testid="table11"] [role="gridcell"]:nth-child(3) {
  background: #f5f5f5 !important;
}

[data-testid="table11"] [role=""]:nth-child(7),
[data-testid="table11"] [role="gridcell"]:nth-child(7) {
  background: #f5f5f5 !important;
}

image
image1632Γ—659 136 KB

Note: According to the Retool team, custom CSS isn’t always the most reliable or durable solution. You can check out their explanation in this community post:
:link: https://community.retool.com/t/increasing-border-thickness-of-table-cells-and-containers/61056/16

1 Like
3

Thank you very much for the answer, test

1 Like