Oddities using the table component

💬 App Building
1

I have been running into some oddities using the table component. The first one is this white space that gets left at the end of the table.

Screenshot 2025-08-27 124550
Screenshot 2025-08-27 124550805×509 9.47 KB

Does anyone know what causes that?

The second thing is the table slightly scrolling up and down as well as left to right when there are no rows in the table. The tables are in stack containers, if that is important to know. Any help would be most appreciated. Thanks!

3

Hi @tomm, are you using custom css?

4

Hi @Mike_M, yes I am.

5

Okay yeah I would say it has to do with the custom css. Do you want to show me the css you're applying here? Then I could give some advice on how to change it. Otherwise I would just say to try and apply this background color to the entire header rather than what looks like it is only being applied to individual column headers/cells.

6

Here is the CSS I am using for the table:

._retool-table1 {
    border: 3px solid #156082 !important;
}

._retool-table1 ._main_hk3l6_1 {
  background-color: #156082;
}

._retool-table1 > div ._rowCount_hk3l6_12 {
  color: #FFFFFF;
}

._retool-table1 > div ._icon_1qmla_47 {
  color: #FFFFFF;
}
7

There may be another css property affecting your table, since I wasn't able to recreate those white spaces with just the css you gave me. Possibly you have some other css that is indirectly adding a white border?

Here is something similar that may work for you, although it needs work if you have actual data, but I'm not sure what you're looking for when the table has data in it.

._retool-table1 {
    border: 3px solid #156082 !important;
}

._retool-table1 ._main_145ea_1 {
  background-color: #156082 !important;
}

._retool-table1 ._main_1y096_1 {
  border-radius: 0px !important;
  border: #156082;
}

._retool-table1 > div ._label_qpl4g_15 {
  color: #FFFFFF !important;
}

._retool-table1 ._main_hk3l6_1 {
  background-color: #156082;
}
  ._retool-table1 > div ._rowCount_hk3l6_12 {
  color: #FFFFFF;
}

Screenshot 2025-09-02 at 5.31.09 PM
Screenshot 2025-09-02 at 5.31.09 PM818×662 14.2 KB

8

Also here is what my table looked like with just the CSS you gave me, in case that helps you narrow it down:

Screenshot 2025-09-02 at 5.35.59 PM
Screenshot 2025-09-02 at 5.35.59 PM810×648 13.1 KB

9

@Mike_M, here is a screenshot of a table with data in it, if that helps. I still get the white space at the end of the header row, but it's not as big. Sometimes the table will scroll left to right within the borders of the table. I have learned some adjustments I can make that will fix that, but I ususally have to go in and make those adjustments everytime. The table also scrolls up and down within the borders of the table. It's not a huge deal, but more of an annoyance.

Screenshot 2025-09-03 061804
Screenshot 2025-09-03 061804886×514 48.7 KB

The only other CSS code I am using is below:

*{
  --retool-list-box-hover-background: orange;
}

._main_145ea_1 {
    border-right: 3px solid #FFF !important;
    border-bottom: 3px solid #FFF !important;
}
10

Hello @tomm,

The white space issue at the end of the table is caused by the border-right property in your custom CSS. That’s what’s creating the extra spacing (see screenshot).

1 Like
11

@tomm, the left/right scrolling may be due to the automatic column sizing when creating a table. Unfortunately there isn't much you can do about that other than manually resizing it. The white space on the right is definitely from the border-right css property. Here is a way you can remove it:

._main_145ea_1 {
    border-left: 3px solid #FFF !important;
    border-bottom: 3px solid #FFF !important;
}
  ._main_145ea_1:first-child {
    border-left: 0px !important;
  }

border-left and first-child seemed to work better for me rather than using border-right and last-child.