A strange 8px bug in the table component

[oitkenmen]

Have you noticed a strange bug in the table component? For example, you have a table 960px wide. All columns should be 240px wide. But it doesn't work like that. You have to make the first column 8px less and the last column 8px more - 232px and 248px respectively. Then, they will be all the same.

[andz-bb]

hey @berkimbayev - this is due to additional padding being added to the first and last columns of the table on the left and right respectively in the Spectrum design table. If you need each column to be equal without having to calculate each column width, the best way is probably to override those styles being applied with your own custom CSS.

I created a table with the same dimensions as you described and identified that the first and last columns are slightly narrower than the rest of them due to this additional padding described above. I added an embed component to my page so that I can override the component styling with the following CSS:

<style>
.spectrum-table-headcell {
  padding: 0 calc(var(--cell-padding) / 1.33) !important;
}
.spectrum-table-cell {
  padding: 0 calc(var(--cell-padding) / 1.33) !important;
}
</style>

before

after

This probably isn't the perfect solution for you but it's one piece of code that will keep the column sizes equal for you dynamically. Hope it helps, if you have any more issues with this let me know and I'll be happy to help