footer row styling issue

[KevinGlinski]

I'm running into an issue with footer rows, I narrowed it down a bit and created a twiddle for it https://ember-twiddle.com/24a4b9210f35029a0000cb459ffdea6f

The issue is that there is a 1px space between the footer rows and the table rows can be seen in the gapas you scroll down the table. It seems to happen when you are also using the ember-bootstrap addon and have a border set on tr and set a max size on the table.

I assume it has to do with how the bottom of the td is calculated in this scenario. In the twiddle, td has a bottom of 21px, when i change it to 20px then the gap goes away

[pzuraq]

Your example gets stuck at building for some reason, have tried to open it but haven't been able to. However, based on the description, I believe the problem is because you're putting the border on the tr element.

We apply sticky styles directly to td and th elements. This is for two main reasons:

1. Some browsers currently have a bug where you cannot apply sticky to thead, tbody, or tr elements directly. To get around this, we apply the styles to the individual cells.

2. We must apply sticky positioning to cells for fixed columns, since they are fixed both from the bottom and the left/right. Applying the positioning to cells unilaterally instead of mixing/matching sticky positioning on cells, rows, headers and footers makes things much easier for us in the code.

This means that you'll have to apply the styles directly to cells for them to work, unfortunately 😕 This could change in the future as the browsers fix their sticky implementations, but as of now I wouldn't count on it.

We should cover this in the "styling the table" section in the docs.